feat(TopBar): initial implementation (unstable) (#692)

libs/spark/CHANGELOG.md

@@ -10,6 +10,8 @@ API surface:
   - [feat] initial implementation
 - **LinearProgress_unstable**
   - [feat] initial implementation
+- **TopBar_unstable**
+  - [feat] initial implementation
 
 ## [vNext](https://github.com/prenda-school/prenda-spark/compare/v2.0.0-alpha.12...v2.0.0-alpha.13) (2023-03-21)
 

libs/spark/src/TopBar_unstable/TopBar_unstable.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+import TopBar_unstable from './TopBar_unstable';
+
+describe('TopBar_unstable', () => {
+  it('Can render without ThemeProvider', () => {
+    const { baseElement } = render(<TopBar_unstable />);
+
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/spark/src/TopBar_unstable/TopBar_unstable.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { Meta, Story as DefaultStory } from '@storybook/react/types-6-0';
+import { TopBar_unstable, TopBarProps_unstable } from '..';
+
+export const _retyped = TopBar_unstable as typeof TopBar_unstable;
+
+export default {
+  title: '@ps/TopBar',
+  component: _retyped,
+  excludeStories: ['_retyped'],
+} as Meta;
+
+const Template = (args) => <TopBar_unstable {...args} />;
+
+type Story = DefaultStory<TopBarProps_unstable>;
+
+export const Default: Story = Template.bind({});
+Default.storyName = '(default)';
+
+export const ColorStandard: Story = Template.bind({});
+ColorStandard.args = { color: 'standard' };
+ColorStandard.storyName = 'color=standard';
+
+export const ColorBrand: Story = Template.bind({});
+ColorBrand.args = { color: 'brand' };
+ColorBrand.storyName = 'color=brand';
+
+export const ColorInverse: Story = Template.bind({});
+ColorInverse.args = { color: 'inverse' };
+ColorInverse.storyName = 'color=inverse';
+
+export const ColorAlternative: Story = Template.bind({});
+ColorAlternative.args = { color: 'alternative' };
+ColorAlternative.storyName = 'color=alternative';
+
+export const ColorTransparent: Story = Template.bind({});
+ColorTransparent.args = { color: 'transparent' };
+ColorTransparent.storyName = 'color=transparent';

libs/spark/src/TopBar_unstable/TopBar_unstable.tsx

@@ -0,0 +1,90 @@
+import {
+  default as MuiAppBar,
+  AppBarProps as MuiAppBarProps,
+} from '@material-ui/core/AppBar';
+import clsx from 'clsx';
+import React, { forwardRef } from 'react';
+import { StandardProps } from '../utils';
+import withStyles, { Styles } from '../withStyles';
+
+export interface TopBarProps_unstable
+  extends StandardProps<
+    MuiAppBarProps,
+    TopBarClassKey_unstable,
+    'classes' | 'color' | 'elevation' | 'square' | 'variant'
+  > {
+  /**
+   * The color of the component.
+   */
+  color?: 'standard' | 'inverse' | 'brand' | 'transparent' | 'alternative';
+}
+
+export type TopBarClassKey_unstable = 'root';
+
+type PrivateClassKey =
+  | 'private-root-color-alternative'
+  | 'private-root-color-inverse'
+  | 'private-root-color-brand'
+  | 'private-root-color-standard'
+  | 'private-root-color-transparent';
+
+const styles: Styles<TopBarClassKey_unstable | PrivateClassKey> = (theme) => ({
+  /* Styles applied to the root element. */
+  root: {
+    borderBottom: theme.unstable_borders.standard,
+    borderColor: theme.unstable_palette.neutral[80],
+    minHeight: 64,
+    [theme.breakpoints.down('sm')]: {
+      minHeight: 48,
+    },
+  },
+  /* Private */
+  'private-root-color-alternative': {
+    backgroundColor: theme.unstable_palette.background.alternative,
+  },
+  'private-root-color-brand': {
+    backgroundColor: theme.unstable_palette.background.brand,
+    borderColor: theme.unstable_palette.neutral[600],
+  },
+  'private-root-color-inverse': {
+    backgroundColor: theme.unstable_palette.background.inverse,
+    borderColor: theme.unstable_palette.neutral[0],
+  },
+  'private-root-color-standard': {
+    backgroundColor: theme.unstable_palette.background.default,
+  },
+  'private-root-color-transparent': {
+    backgroundColor: 'transparent',
+  },
+});
+
+const UnstyledTopBar = forwardRef<HTMLDivElement, TopBarProps_unstable>(
+  function TopBar(props, ref) {
+    const { classes, color = 'standard', ...other } = props;
+
+    return (
+      <MuiAppBar
+        classes={{
+          root: clsx(classes.root, {
+            [classes['private-root-color-alternative']]:
+              color === 'alternative',
+            [classes['private-root-color-brand']]: color === 'brand',
+            [classes['private-root-color-inverse']]: color === 'inverse',
+            [classes['private-root-color-standard']]: color === 'standard',
+            [classes['private-root-color-transparent']]:
+              color === 'transparent',
+          }),
+        }}
+        elevation={0}
+        ref={ref}
+        {...other}
+      />
+    );
+  }
+);
+
+const TopBar_unstable = withStyles(styles, {
+  name: 'MuiSparkTopBar_unstable',
+})(UnstyledTopBar) as typeof UnstyledTopBar;
+
+export default TopBar_unstable;

libs/spark/src/TopBar_unstable/index.ts

@@ -0,0 +1,2 @@
+export { default } from './TopBar_unstable';
+export * from './TopBar_unstable';

libs/spark/src/index.ts

@@ -211,6 +211,9 @@ export * from './ThemeProvider';
 export { default as Toolbar } from './Toolbar';
 export * from './Toolbar';
 
+export { default as TopBar_unstable } from './TopBar_unstable';
+export * from './TopBar_unstable';
+
 export { default as Typography } from './Typography';
 export * from './Typography';