Added stories for scrollable

src/components/Heading.tsx

@@ -1,13 +1,6 @@
 import React, { FC } from 'react'
 import styled from 'styled-components'
 
-type HLevel = 1 | 2 | 3 | 4 | 5 | 6
-
-interface Props {
-  level: HLevel
-  style: any //Find correct extension
-}
-
 const H1 = styled.h1`
   font-size: 4rem;
   font-weight: 400;
@@ -57,9 +50,21 @@ const getComponent = (level: HLevel) => {
   }
 }
 
-const Heading: FC<Props> = ({ level, children, ...rest }) => {
-  const H = getComponent(level)
-  return <H {...rest}>{children}</H>
+const Heading: FC<HeadingProps> = ({ level = 1, ...props }) => {
+  const Component = getComponent(level)
+  //@ts-ignore
+  return <Component {...props} />
+}
+
+type HLevel = 1 | 2 | 3 | 4 | 5 | 6
+
+type NativeHeadingType = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLHeadingElement>,
+  HTMLHeadingElement
+>
+
+type HeadingProps = NativeHeadingType & {
+  level?: HLevel
 }
 
 export { Heading }

src/components/Scrollable/scrollable.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import Scrollable from './index'
+import { AdaptProvider, Heading, Box, Paragraph } from '..'
+
+export default {
+  title: 'Scrollable',
+  decorators: [storyFn => <AdaptProvider>{storyFn()}</AdaptProvider>],
+}
+
+export const yAxis = () => (
+  <Scrollable axis="y" width="300px" height="200px">
+    <Heading level={6}>Start Scrolling</Heading>
+    <Box>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Paragraph>
+    </Box>
+  </Scrollable>
+)
+
+export const xAxis = () => (
+  <Scrollable axis="x" width="300px" height="200px">
+    <Heading level={6}>Start Scrolling</Heading>
+    <Box width="600px" height="1px" style={{ backgroundColor: 'black' }} />
+    <Box>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Paragraph>
+    </Box>
+  </Scrollable>
+)
+
+export const xyAxis = () => (
+  <Scrollable axis="xy" width="300px" height="200px">
+    <Heading level={6}>Start Scrolling</Heading>
+    <Box width="600px" height="1px" style={{ backgroundColor: 'black' }} />
+    <Box>
+      <Paragraph>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </Paragraph>
+    </Box>
+  </Scrollable>
+)

src/components/index.ts

@@ -1,7 +1,7 @@
 import Box from './Box'
 import Clickable from './Clickable'
 import Flexible from './core/Flexible'
-import Scrollable from './core/Scrollable'
+import Scrollable from './Scrollable'
 
 import AdaptProvider from './AdaptProvider'