feat: header variants

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

@@ -1,8 +1,15 @@
 import { css } from 'emotion';
 import tokens from '@contentful/f36-tokens';
 import { HEADER_HEIGHT } from './constants';
+import type { HeaderProps } from './Header';
 
-export const getHeaderStyles = () => ({
+export const getHeaderStyles = ({
+  hasFilters,
+  variant,
+}: {
+  hasFilters?: boolean;
+  variant: HeaderProps['variant'];
+}) => ({
   actions: css({
     flexGrow: 0,
     flexShrink: 1,
@@ -20,30 +27,20 @@ export const getHeaderStyles = () => ({
     flexShrink: 1,
     flexBasis: '50%',
   }),
-  root: (hasFilters?: boolean) =>
-    css({
-      background: tokens.gray100,
-      height: `${HEADER_HEIGHT}px`,
-      // Reduce vertical padding when there's a filter in the header
-      padding: hasFilters
-        ? `${tokens.spacingXs} ${tokens.spacingS}`
-        : tokens.spacingS,
-    }),
+  root: css({
+    borderBottom:
+      variant === 'breadcrumb' ? `1px solid ${tokens.gray200}` : 'none',
+    background: tokens.colorWhite,
+    height: `${HEADER_HEIGHT}px`,
+    marginTop: variant === 'title' ? tokens.spacingS : 0,
+    // Reduce vertical padding when there's a filter in the header
+    padding: hasFilters ? `${tokens.spacingXs} 0` : `${tokens.spacingS} 0`,
+  }),
   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,
-    },
-  }),
-  noWrap: css({
-    textWrap: 'nowrap',
-    marginLeft: tokens.spacingXs,
-  }),
 });

packages/components/header/src/Header.tsx

@@ -4,7 +4,6 @@ import React, {
   type Ref,
   type ReactElement,
   type ReactNode,
-  isValidElement,
 } from 'react';
 import { cx } from 'emotion';
 import {
@@ -13,36 +12,51 @@ import {
   type PolymorphicComponent,
   type PolymorphicProps,
 } from '@contentful/f36-core';
-import { Subheading } from '@contentful/f36-typography';
 import { BackButton, type BackButtonProps } from './BackButton';
 import { Breadcrumb, type BreadcrumbProps } from './Breadcrumb';
-import { Segmentation } from './Segmentation';
 import { getHeaderStyles } from './Header.styles';
+import { HeaderTitle } from './HeaderTitle';
 
 const HEADER_DEFAULT_TAG = 'header';
 
-type WithBackButtonOrNot =
+type Variant =
   | {
+      backButtonProps?: never;
+      breadcrumbs?: never;
+      variant: 'title';
+      withBackButton?: never;
+    }
+  | {
+      backButtonProps?: never;
+      /**
+       * An (optional) list of navigable links to prepend to the current title.
+       */
+      breadcrumbs?: BreadcrumbProps['breadcrumbs'];
+      variant?: 'breadcrumb' | undefined;
+      withBackButton?: false | never;
+    }
+  | {
+      /**
+       * Props to spread on the back button. You almost certainly want to pass
+       * an `onClick` handler.
+       */
       backButtonProps?: BackButtonProps;
+      /**
+       * An (optional) list of navigable links to prepend to the current title.
+       */
+      breadcrumbs?: BreadcrumbProps['breadcrumbs'];
+      variant?: 'breadcrumb' | undefined;
       /**
        * If `true`, renders a leading back button within the header.
        */
       withBackButton: true;
-    }
-  | {
-      backButtonProps?: never;
-      withBackButton?: false | never;
     };
 
-type HeaderInternalProps = WithBackButtonOrNot & {
+type HeaderInternalProps = Variant & {
   /**
    * Optional JSX children to display as complementary actions (e.g. buttons) related to the current page/route.
    */
   actions?: ReactElement | ReactElement[];
-  /**
-   * An (optional) list of navigable links to prepend to the current title.
-   */
-  breadcrumbs?: BreadcrumbProps['breadcrumbs'];
   /**
    * An (optional) element displayed in the center of the header, typically used to render refinement/search UI.
    */
@@ -68,38 +82,34 @@ function _Header<E extends ElementType = typeof HEADER_DEFAULT_TAG>(
     metadata,
     title,
     withBackButton,
+    variant = 'breadcrumb',
     ...otherProps
   }: HeaderProps<E>,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any -- polymorphic element
   forwardedRef: Ref<any>,
 ) {
-  const styles = getHeaderStyles();
+  const styles = getHeaderStyles({ hasFilters: Boolean(filters), variant });
   return (
     <Flex
       alignItems="center"
       as={HEADER_DEFAULT_TAG}
       gap="spacingM"
-      className={cx(styles.root(Boolean(filters)), className)}
+      className={cx(styles.root, className)}
       ref={forwardedRef}
       {...otherProps}
     >
       <div className={styles.context}>
         <Flex alignItems="center" gap="spacingXs">
-          <Segmentation>
-            {withBackButton && <BackButton {...backButtonProps} />}
-            {breadcrumbs && <Breadcrumb breadcrumbs={breadcrumbs} />}
-            {title && (
-              <div className={styles.noWrap}>
-                {isValidElement(title) ? (
-                  title
-                ) : (
-                  <Subheading as="h1" className={styles.title}>
-                    {title}
-                  </Subheading>
-                )}
-              </div>
-            )}
-          </Segmentation>
+          {variant === 'title' ? (
+            <HeaderTitle title={title} variant="title" />
+          ) : (
+            <>
+              {withBackButton && <BackButton {...backButtonProps} />}
+              {breadcrumbs && <Breadcrumb breadcrumbs={breadcrumbs} />}
+              {title && <HeaderTitle title={title} variant="breadcrumb" />}
+            </>
+          )}
+
           {metadata && (
             <Flex alignItems="center" gap="spacing2Xs">
               {metadata}

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

@@ -0,0 +1,15 @@
+import { css } from 'emotion';
+import tokens from '@contentful/f36-tokens';
+
+export const getHeaderTitleStyles = () => ({
+  title: css({
+    margin: `${tokens.spacing2Xs} 0`,
+    '&:not(:first-child)': {
+      marginLeft: tokens.spacingXs,
+    },
+  }),
+  noWrap: css({
+    textWrap: 'nowrap',
+    marginLeft: tokens.spacingXs,
+  }),
+});

packages/components/header/src/HeaderTitle.tsx

@@ -0,0 +1,26 @@
+import React, { isValidElement } from 'react';
+import { DisplayText, Subheading } from '@contentful/f36-typography';
+import type { HeaderProps } from './Header';
+import { getHeaderTitleStyles } from './HeaderTitle.styles';
+
+type HeaderTitleProps = {
+  title: HeaderProps['title'];
+  variant: HeaderProps['variant'];
+};
+
+export function HeaderTitle({ title, variant }: HeaderTitleProps) {
+  const styles = getHeaderTitleStyles();
+  const Element = variant === 'title' ? DisplayText : Subheading;
+
+  return (
+    <div className={styles.noWrap}>
+      {isValidElement(title) ? (
+        title
+      ) : (
+        <Element as="h1" className={styles.title}>
+          {title}
+        </Element>
+      )}
+    </div>
+  );
+}

packages/components/header/stories/Header.stories.tsx

@@ -1,76 +1,97 @@
 import React from 'react';
 import type { Meta, Story } from '@storybook/react/types-6-0';
-
-import { Header, type HeaderProps } from '../src/Header';
+import { SectionHeading } from '@contentful/f36-typography';
 import { Box, Flex } from '@contentful/f36-core';
 import { Button } from '@contentful/f36-button';
 import tokens from '@contentful/f36-tokens';
-import { action } from '@storybook/addon-actions';
-import { CopyIcon, SearchIcon } from '@contentful/f36-icons';
+import { SearchIcon } from '@contentful/f36-icons';
 import { TextInput } from '@contentful/f36-forms';
 
+import { Header, type HeaderProps } from '../src/Header';
+import { action } from '@storybook/addon-actions';
+
 export default {
   component: Header,
   title: 'Layout/Header',
 } as Meta;
 
-export const Default: Story<HeaderProps> = ({
-  title = 'Product',
-  withBackButton: _wbb,
-  ...args
-}) => (
-  <Box style={{ minWidth: '1000px' }}>
-    <Header
-      withBackButton={true}
-      backButtonProps={{ onClick: action('back button click') }}
-      breadcrumbs={[
-        {
-          content: 'Content Types',
-          url: '#',
-        },
-      ]}
-      title={title}
-      actions={
-        <Flex
-          alignItems="center"
-          gap={tokens.spacingS}
-          justifyContent="flex-end"
-        >
-          <Button variant="secondary" size="small" startIcon={<CopyIcon />}>
-            Copy ID
-          </Button>
-          <Button variant="positive" size="small">
-            Save
-          </Button>
-        </Flex>
-      }
-      {...args}
-    />
-  </Box>
+export const Default: Story<HeaderProps> = (args) => (
+  <Header
+    actions={
+      <Flex alignItems="center" gap={tokens.spacingS} justifyContent="flex-end">
+        <Button variant="positive" size="small">
+          Save
+        </Button>
+      </Flex>
+    }
+    {...args}
+  />
 );
 
+Default.args = {
+  backButtonProps: { onClick: action('back button click') },
+  breadcrumbs: [
+    {
+      content: 'Content Types',
+      url: '#',
+    },
+  ],
+  title: 'Product',
+};
+
 export const WithFilters: Story<HeaderProps> = ({
   title = 'Content Types',
   ...args
 }) => (
-  <Box style={{ minWidth: '1000px' }}>
-    <Header
-      title={title}
-      filters={
-        <TextInput placeholder="Search" icon={<SearchIcon />} size="small" />
-      }
-      actions={
-        <Flex
-          alignItems="center"
-          gap={tokens.spacingS}
-          justifyContent="flex-end"
-        >
-          <Button variant="positive" size="small">
-            Save
-          </Button>
-        </Flex>
-      }
-      {...args}
-    />
-  </Box>
+  <Header
+    title={title}
+    filters={
+      <TextInput placeholder="Search" icon={<SearchIcon />} size="small" />
+    }
+    actions={
+      <Flex alignItems="center" gap={tokens.spacingS} justifyContent="flex-end">
+        <Button variant="positive" size="small">
+          Save
+        </Button>
+      </Flex>
+    }
+    {...args}
+  />
+);
+
+export const Overview: Story<HeaderProps> = () => (
+  <>
+    <Flex flexDirection="column" gap="spacingL">
+      <Box>
+        <SectionHeading marginBottom="spacingS">
+          Breadcrumb variant
+        </SectionHeading>
+
+        <Header
+          actions={
+            <Button variant="primary" size="small">
+              New Content type
+            </Button>
+          }
+          backButtonProps={{ onClick: action }}
+          title="Content type"
+          withBackButton
+        />
+      </Box>
+
+      <Box>
+        <SectionHeading marginBottom="spacingS">Title variant</SectionHeading>
+
+        <Header
+          actions={
+            <Button variant="primary" size="small">
+              New entry
+            </Button>
+          }
+          variant="title"
+          title="All content"
+        />
+      </Box>
+    </Flex>
+  </>
 );

packages/components/icon/stories/Icon.stories.tsx

@@ -4,8 +4,7 @@ import { SectionHeading, Text } from '@contentful/f36-typography';
 import type { Meta, Story } from '@storybook/react/types-6-0';
 import { MdAcUnit as ExternalIcon } from 'react-icons/md';
 
-import { Icon } from '../src/';
-import type { IconInternalProps } from '../src/Icon';
+import { Icon, type IconInternalProps } from '../src/Icon';
 
 export default {
   argTypes: {

packages/components/layout/src/Layout.styles.ts

@@ -143,7 +143,6 @@ export const getLayoutSidebarStyles = (
 
 export const getLayoutHeaderStyles = (variant: LayoutProps['variant']) => ({
   layoutHeader: css({
-    borderBottom: `1px solid ${tokens.gray200}`,
     padding: `0 ${tokens.spacingL}`,
     width: '100%',
     maxWidth: variant === 'fullscreen' ? '100%' : '1920px',