refactor(appbar): add position prop

This also deprecates the fixed prop.

Author: WesSouza

src/AppBar/AppBar.spec.tsx

@@ -31,6 +31,15 @@ describe('<AppBar />', () => {
     expect(headerEl).toHaveStyleRule('position', 'absolute');
   });
 
+  it('should render position prop properly', () => {
+    const { container } = render(
+      <AppBar {...defaultProps} position='sticky' />
+    );
+    const headerEl = container.firstElementChild;
+
+    expect(headerEl).toHaveStyleRule('position', 'sticky');
+  });
+
   it('should custom style', () => {
     const { container } = render(
       <AppBar {...defaultProps} style={{ backgroundColor: 'papayawhip' }} />

src/AppBar/AppBar.tsx

@@ -1,20 +1,22 @@
 import React, { forwardRef } from 'react';
-import styled from 'styled-components';
+import styled, { CSSProperties } from 'styled-components';
 
 import { createBorderStyles, createBoxStyles } from '../common';
 import { CommonStyledProps } from '../types';
 
 type AppBarProps = {
   children: React.ReactNode;
+  /** @deprecated Use `position` instead */
   fixed?: boolean;
+  position?: CSSProperties['position'];
 } & React.HTMLAttributes<HTMLElement> &
   CommonStyledProps;
 
 const StyledAppBar = styled.header<AppBarProps>`
   ${createBorderStyles()};
   ${createBoxStyles()};
 
-  position: ${props => (props.fixed ? 'fixed' : 'absolute')};
+  position: ${props => props.position ?? (props.fixed ? 'fixed' : 'absolute')};
   top: 0;
   right: 0;
   left: auto;
@@ -24,9 +26,14 @@ const StyledAppBar = styled.header<AppBarProps>`
 `;
 
 const AppBar = forwardRef<HTMLElement, AppBarProps>(
-  ({ children, fixed = true, ...otherProps }, ref) => {
+  ({ children, fixed = true, position = 'fixed', ...otherProps }, ref) => {
     return (
-      <StyledAppBar fixed={fixed} ref={ref} {...otherProps}>
+      <StyledAppBar
+        fixed={fixed}
+        position={fixed !== false ? position : undefined}
+        ref={ref}
+        {...otherProps}
+      >
         {children}
       </StyledAppBar>
     );