feat(divider): convert to TypeScript and export types

Author: arturbien

src/ColorInput/ColorInput.js

@@ -5,7 +5,7 @@ import styled, { css } from 'styled-components';
 import useControlledOrUncontrolled from '../common/hooks/useControlledOrUncontrolled';
 import { focusOutline } from '../common';
 import { StyledButton } from '../Button/Button';
-import Divider from '../Divider/Divider';
+import { Divider } from '../Divider/Divider';
 
 const Trigger = styled(StyledButton)`
   padding-left: 8px;

src/Divider/Divider.js

@@ -2,7 +2,7 @@
 
 name: Divider
 menu: Components
----import Divider from './Divider'
+import { Divider } from './Divider'
 import List from '../List/List'
 import ListItem from '../ListItem/ListItem'
 

src/Divider/Divider.mdx

@@ -1,27 +1,25 @@
-import React from 'react';
-
 import { renderWithTheme } from '../../test/utils';
 
-import Divider from './Divider';
+import { Divider } from './Divider';
 
 describe('<Divider />', () => {
   it('should render Divider', () => {
     const { container } = renderWithTheme(<Divider />);
-    const divider = container.firstChild;
+    const divider = container.firstElementChild;
 
     expect(divider).toBeInTheDocument();
   });
 
   describe('prop: size', () => {
     it('defaults to 100%', () => {
       const { container } = renderWithTheme(<Divider />);
-      const divider = container.firstChild;
+      const divider = container.firstElementChild;
       expect(divider).toHaveStyleRule('width', '100%');
     });
     it('sets size passed correctly', () => {
       const size = '53px';
       const { container } = renderWithTheme(<Divider size={size} />);
-      const divider = container.firstChild;
+      const divider = container.firstElementChild;
 
       expect(divider).toHaveStyleRule('width', size);
     });
@@ -31,7 +29,7 @@ describe('<Divider />', () => {
     it('renders horizontal line by default', () => {
       const size = '53px';
       const { container } = renderWithTheme(<Divider size={size} />);
-      const divider = container.firstChild;
+      const divider = container.firstElementChild;
 
       expect(divider).toHaveStyleRule('width', size);
     });
@@ -41,22 +39,22 @@ describe('<Divider />', () => {
       const { container } = renderWithTheme(
         <Divider orientation='vertical' size={size} />
       );
-      const divider = container.firstChild;
+      const divider = container.firstElementChild;
 
       expect(divider).toHaveStyleRule('height', size);
     });
   });
   describe('prop: size', () => {
     it('should set proper size', () => {
       const { container } = renderWithTheme(<Divider size='85%' />);
-      const avatarEl = container.firstChild;
+      const avatarEl = container.firstElementChild;
 
       expect(avatarEl).toHaveStyleRule('width', '85%');
     });
 
     it('when passed a number, sets size in px', () => {
       const { container } = renderWithTheme(<Divider size={25} />);
-      const avatarEl = container.firstChild;
+      const avatarEl = container.firstElementChild;
 
       expect(avatarEl).toHaveStyleRule('width', '25px');
     });
@@ -65,7 +63,7 @@ describe('<Divider />', () => {
       const { container } = renderWithTheme(
         <Divider size={25} orientation='vertical' />
       );
-      const avatarEl = container.firstChild;
+      const avatarEl = container.firstElementChild;
 
       expect(avatarEl).toHaveStyleRule('height', '25px');
     });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { ComponentMeta } from '@storybook/react';
 import styled from 'styled-components';
 
 import { Divider, List, ListItem } from 'react95';
@@ -12,7 +12,7 @@ export default {
   title: 'Divider',
   component: Divider,
   decorators: [story => <Wrapper>{story()}</Wrapper>]
-};
+} as ComponentMeta<typeof Divider>;
 
 export function Default() {
   return (

src/Divider/Divider.stories.js renamed to src/Divider/Divider.stories.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { Orientation } from '../types';
+
+function getSize(value: string | number) {
+  return typeof value === 'number' ? `${value}px` : value;
+}
+interface DividerProps {
+  size?: string | number;
+  orientation?: Orientation;
+}
+const Divider = styled.div<DividerProps>`
+  ${({ orientation, theme, size = '100%' }) =>
+    orientation === 'vertical'
+      ? `
+    height: ${getSize(size)};
+    border-left: 2px solid ${theme.borderDark};
+    border-right: 2px solid ${theme.borderLightest};
+    margin: 0;
+    `
+      : `
+    width: ${getSize(size)};
+    border-bottom: 2px solid ${theme.borderLightest};
+    border-top: 2px solid ${theme.borderDark};
+    margin: 0;
+    `}
+`;
+
+export { Divider, DividerProps };

src/Divider/Divider.tsx

@@ -6,14 +6,14 @@ export { createScrollbars } from './common/index';
 export * from './Anchor/Anchor';
 export { default as AppBar } from './AppBar/AppBar';
 export { default as Avatar } from './Avatar/Avatar';
-export { default as Bar } from './Bar/Bar';
+export * from './Bar/Bar';
 export { default as Button } from './Button/Button';
 export { default as Checkbox } from './Checkbox/Checkbox';
 export { default as ColorInput } from './ColorInput/ColorInput';
 export { default as Counter } from './Counter/Counter';
 export { default as Cutout } from './Cutout/Cutout';
 export { default as Desktop } from './Desktop/Desktop';
-export { default as Divider } from './Divider/Divider';
+export * from './Divider/Divider';
 export { default as Fieldset } from './Fieldset/Fieldset';
 export { default as Hourglass } from './Hourglass/Hourglass';
 export { default as List } from './List/List';