fix(Heading): use vertical margins

package.json

@@ -48,23 +48,23 @@
     "@emotion/styled": "^10.0.27",
     "@types/jest": "^26.0.15",
     "@types/node": "^14.14.6",
-    "@types/react": "^16.9.55",
+    "@types/react": "^16.9.56",
     "@typescript-eslint/eslint-plugin": "^4.6.1",
     "@typescript-eslint/parser": "^4.6.1",
     "babel-eslint": "^10.1.0",
     "babel-preset-react-app": "^10.0.0",
     "dokz": "^1.0.79",
-    "eslint": "^7.12.1",
+    "eslint": "^7.13.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.4.1",
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^4.3.0",
-    "jest": "^26.6.2",
+    "jest": "^26.6.3",
     "microbundle": "^0.12.4",
-    "next": "^10.0.0",
+    "next": "^10.0.1",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.1.2",
     "pretty-quick": "^3.1.0",

src/lib/Flex/Flex.tsx

@@ -5,9 +5,14 @@ import { styled } from '../stitches.config';
 import { gaps } from '../theme/variants';
 
 export const FlexBox = styled('div', {
-  display: 'flex',
+  'display': 'flex',
 
-  variants: {
+  '& > h1,h2,h3,h4,h5,h6': {
+    mt: 0,
+    mb: 0,
+  },
+
+  'variants': {
     space: gaps,
     display: {
       block: {

src/lib/Heading/Heading.tsx

@@ -11,24 +11,34 @@ export const HeadingText = styled('h1', {
   variants: {
     as: {
       h1: {
-        textSize: '$2xl',
+        fontSize: '$2xl',
         textTransform: 'uppercase',
+        mt: '$3',
+        mb: '$5',
       },
       h2: {
-        textSize: '$2xl',
+        fontSize: '$2xl',
+        mt: '$2',
+        mb: '$4',
       },
       h3: {
-        textSize: '$xl',
+        fontSize: '$xl',
+        mt: '$2',
+        mb: '$4',
       },
       h4: {
-        textSize: '$lg',
+        fontSize: '$lg',
+        mt: '$1',
+        mb: '$3',
       },
       h5: {
-        textSize: '$lg',
+        fontSize: '$lg',
         textTransform: 'uppercase',
+        mt: '$1',
+        mb: '$2',
       },
       h6: {
-        textSize: '$md',
+        fontSize: '$md',
       },
     },
     variant: {

src/pages/components/Heading.mdx

@@ -8,14 +8,14 @@ import { Flex, Heading } from '@fxtrot/ui';
 ## Heading
 
 <Playground>
-  <Flex>
+  <React.Fragment>
     <Heading>Heading 1</Heading>
     <Heading as="h2">Heading 2</Heading>
     <Heading as="h3">Heading 3</Heading>
     <Heading as="h4">Heading 4</Heading>
     <Heading as="h5">Heading 5</Heading>
     <Heading as="h6">Heading 6</Heading>
-  </Flex>
+  </React.Fragment>
 </Playground>
 
 ## Light