chore(AppBar): move appbar from brand

packages/gamut/__tests__/__snapshots__/gamut.test.ts.snap

@@ -8,6 +8,8 @@ exports[`Gamut Exported Keys 1`] = `
   "Alert",
   "Anchor",
   "AnchorBase",
+  "AppBar",
+  "AppBarSection",
   "AppWrapper",
   "Badge",
   "BodyPortal",

packages/gamut/src/AppBar/AppBar.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import { ContentContainer } from '../ContentContainer';
+import { WithChildrenProp } from '../utils';
+
+export interface AppBarProps
+  extends WithChildrenProp,
+    Pick<React.ComponentProps<typeof ContentContainer>, 'aria-label' | 'as'> {
+  /**
+   * Whether the container should be larger than the default content size.
+   */
+  wide?: boolean;
+}
+
+export const AppBar: React.FC<AppBarProps> = ({
+  'aria-label': ariaLabel,
+  as,
+  wide,
+  children,
+}) => {
+  return (
+    <ContentContainer
+      aria-label={ariaLabel}
+      as={as}
+      display="flex"
+      alignItems="center"
+      height="100%"
+      size={wide ? 'wide' : 'medium'}
+      zIndex={14}
+    >
+      {children}
+    </ContentContainer>
+  );
+};

packages/gamut/src/AppBar/AppBarSection.tsx

@@ -0,0 +1,46 @@
+import { styledOptions, variant } from '@codecademy/gamut-styles';
+import { StyleProps } from '@codecademy/variance';
+import styled from '@emotion/styled';
+import * as React from 'react';
+
+import { WithChildrenProp } from '../utils';
+
+const positionVariants = variant({
+  prop: 'position',
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+    zIndex: 1,
+  },
+  variants: {
+    left: {
+      flex: 1,
+    },
+    right: {
+      flex: 1,
+      justifyContent: 'flex-end',
+    },
+    center: {
+      flex: 2,
+      justifyContent: 'center',
+      textAlign: 'center',
+    },
+  },
+});
+
+export interface AppBarSectionProps
+  extends StyleProps<typeof positionVariants>,
+    WithChildrenProp {}
+
+const StyledSection = styled(
+  'div',
+  styledOptions
+)<AppBarSectionProps>(positionVariants);
+
+export const AppBarSection: React.FC<AppBarSectionProps> = ({
+  position,
+  children,
+}) => {
+  return <StyledSection position={position}>{children}</StyledSection>;
+};

packages/gamut/src/AppBar/index.tsx

@@ -0,0 +1,2 @@
+export * from './AppBar';
+export * from './AppBarSection';

packages/gamut/src/index.tsx

@@ -4,6 +4,7 @@ export * from './AccordionButtonDeprecated';
 export * from './Alert';
 export * from './Anchor';
 export * from './Animation';
+export * from './AppBar';
 export * from './AppWrapper';
 export * from './Badge';
 export * from './BodyPortal';

packages/styleguide/src/lib/Organisms/Headers & Footers/About.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/blocks';
+
+import { AboutHeader, TableOfContents } from '~styleguide/blocks';
+
+export const parameters = {
+  id: 'Organisms/Headers & Footers',
+  title: 'Headers & Footers',
+  subtitle:
+    'Components related to header and footers, sometimes used within larger organisms and page layouts.',
+};
+
+<Meta title="Organisms/Headers & Footers/About" />
+
+<AboutHeader {...parameters} />
+
+These are the platform agnostic parts of the page that are used to provide structure and layout to the page. They are not specific to any one page or layout, but are used across the site to provide a consistent look and feel.
+
+<br />
+
+<TableOfContents
+  links={[
+    {
+      id: 'Organisms/Headers & Footers/AppBar',
+      subtitle:
+        'Components that provide spacing and layout help that you can use for something like a footer or header',
+      title: 'AppBar',
+      status: 'current',
+    },
+  ]}
+/>

packages/styleguide/src/lib/Organisms/Headers & Footers/AppBar/AppBar.mdx

@@ -0,0 +1,30 @@
+import { Canvas, Controls, Meta, Story } from '@storybook/blocks';
+
+import { ComponentHeader } from '~styleguide/blocks';
+
+import * as AppBarStories from './AppBar.stories';
+
+export const parameters = {
+  subtitle: `Components that provide spacing and layout help that you can use for something like a footer or header`,
+  status: 'current',
+};
+
+<Meta of={AppBarStories} />
+
+<ComponentHeader {...parameters} />
+
+This is an example of an AppBar component that contains one left-oriented AppBarSection that holds one AppBar Tab.
+
+<Canvas>
+  <Story of={AppBarStories.Default} />
+</Canvas>
+
+<Controls />
+
+## Header
+
+This is an example of how our headers use the AppBar component to format various sections in a bar (left, center, and right). The AppBar can hold as many AppBarSections as you'd like.
+
+<Canvas>
+  <Story of={AppBarStories.Header} />
+</Canvas>

packages/styleguide/src/lib/Organisms/Headers & Footers/AppBar/AppBar.stories.tsx

@@ -0,0 +1,30 @@
+import { AppBar, AppBarSection, Logo } from '@codecademy/gamut';
+
+export default {
+  component: AppBar,
+  subcomponents: {
+    AppBarSection,
+  },
+};
+
+export const Default = {
+  render: () => (
+    <AppBar>
+      <AppBarSection position="left">In Left Position</AppBarSection>
+    </AppBar>
+  ),
+  name: 'AppBar',
+};
+
+export const Header = {
+  render: () => (
+    <AppBar>
+      <AppBarSection position="left">
+        <Logo />
+      </AppBarSection>
+      <AppBarSection position="center">Pricing</AppBarSection>
+      <AppBarSection position="right">Sign In</AppBarSection>
+    </AppBar>
+  ),
+  name: 'Header',
+};