feat(toolbar): convert to TypeScript and export types

Author: WesSouza

src/AppBar/AppBar.mdx

@@ -4,7 +4,7 @@ menu: Components
 ---
 
 import { AppBar } from './AppBar';
-import Toolbar from '../Toolbar/Toolbar';
+import { Toolbar } from '../Toolbar/Toolbar';
 import { Button } from '../Button/Button';
 import { TextField } from '../TextField/TextField';
 import List from '../List/List';

src/Bar/Bar.mdx

@@ -5,7 +5,7 @@ menu: Components
 
 import { Bar } from '../Bar/Bar';
 import { AppBar } from '../AppBar/AppBar.js';
-import Toolbar from '../Toolbar/Toolbar.js';
+import { Toolbar } from '../Toolbar/Toolbar.js';
 import { Button } from '../Button/Button.js';
 
 # Bar

src/Button/Button.mdx

@@ -7,7 +7,7 @@ import { Button } from './Button';
 import Window from '../Window/Window';
 import WindowContent from '../WindowContent/WindowContent';
 import { Cutout } from '../Cutout/Cutout';
-import Toolbar from '../Toolbar/Toolbar';
+import { Toolbar } from '../Toolbar/Toolbar';
 
 # Button
 

src/DatePicker/DatePicker.js

@@ -6,7 +6,7 @@ import { Button } from '../Button/Button';
 import { Cutout } from '../Cutout/Cutout';
 import { NumberField } from '../NumberField/NumberField';
 import Select from '../Select/Select';
-import Toolbar from '../Toolbar/Toolbar';
+import { Toolbar } from '../Toolbar/Toolbar';
 import Window from '../Window/Window';
 import WindowContent from '../WindowContent/WindowContent';
 import WindowHeader from '../WindowHeader/WindowHeader';

src/Toolbar/Toolbar.js

@@ -1,7 +1,6 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 
-import Toolbar from './Toolbar';
+import { Toolbar } from './Toolbar';
 
 describe('<Toolbar />', () => {
   it('should render', () => {

src/Toolbar/Toolbar.spec.js renamed to src/Toolbar/Toolbar.spec.tsx

@@ -0,0 +1,27 @@
+import React, { forwardRef } from 'react';
+import styled from 'styled-components';
+
+type ToolbarProps = {
+  children?: React.ReactNode;
+  noPadding?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+
+const StyledToolbar = styled.div<ToolbarProps>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: ${props => (props.noPadding ? '0' : '4px')};
+`;
+
+const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(function Toolbar(
+  { children, noPadding = false, ...otherProps },
+  ref
+) {
+  return (
+    <StyledToolbar noPadding={noPadding} ref={ref} {...otherProps}>
+      {children}
+    </StyledToolbar>
+  );
+});
+
+export { Toolbar };

src/Toolbar/Toolbar.tsx

@@ -7,7 +7,7 @@ import Window from './Window';
 import WindowContent from '../WindowContent/WindowContent';
 import WindowHeader from '../WindowHeader/WindowHeader';
 import { Button } from '../Button/Button';
-import Toolbar from '../Toolbar/Toolbar';
+import { Toolbar } from '../Toolbar/Toolbar';
 
 # Window
 

src/Window/Window.mdx

@@ -35,7 +35,7 @@ export * from './TableHeadCell/TableHeadCell';
 export * from './TableRow/TableRow';
 export * from './Tabs/Tabs';
 export * from './TextField/TextField';
-export { default as Toolbar } from './Toolbar/Toolbar';
+export * from './Toolbar/Toolbar';
 export * from './Tooltip/Tooltip';
 export { default as Tree } from './Tree/Tree';
 export * from './Window/Window';