Repository: laboratoriobridge/bold
Pull request #400 (2019-05-20 20:47:21)

[Heading Section] Add vSpace prop
Add vSpace prop to allow configuration of the spacing between Heading component and the children


Patch:
diff --git a/.gitignore b/.gitignore
index 811a61973..6fdee09ee 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@ yarn-error.log
 lib
 storybook-static
 .cache
+.idea
 
 # Next files
 site/.next
diff --git a/src/components/elements/textual/HeadingSection/HeadingSection.tsx b/src/components/elements/textual/HeadingSection/HeadingSection.tsx
index 67e68dbab..9b7018a7c 100644
--- a/src/components/elements/textual/HeadingSection/HeadingSection.tsx
+++ b/src/components/elements/textual/HeadingSection/HeadingSection.tsx
@@ -6,14 +6,15 @@ import { Heading, HeadingProps } from '../Heading/Heading'
 export interface HeadingSectionProps {
   title: React.ReactNode
   level: HeadingProps['level']
+  vSpace?: number
   color?: HeadingProps['color']
   style?: ExternalStyles
   children?: React.ReactNode
 }
 
 export function HeadingSection(props: HeadingSectionProps) {
-  const { style, title, children, ...rest } = props
-  const { classes, css } = useStyles(createStyles)
+  const { style, title, children, vSpace, ...rest } = props
+  const { classes, css } = useStyles(createStyles(vSpace))
 
   return (
     <div className={css(classes.section, style)}>
@@ -28,9 +29,9 @@ export function HeadingSection(props: HeadingSectionProps) {
 
 HeadingSection.defaultProps = {} as Partial<HeadingSectionProps>
 
-export const createStyles = () => ({
+export const createStyles = (vSpacing: number) => () => ({
   section: {},
   title: {
-    marginBottom: '1rem',
+    marginBottom: vSpacing ? vSpacing : '1rem',
   },
 })


Test patch:
diff --git a/src/components/elements/textual/HeadingSection/HeadingSection.test.tsx b/src/components/elements/textual/HeadingSection/HeadingSection.test.tsx
index 7b5050c03..9149ccc27 100644
--- a/src/components/elements/textual/HeadingSection/HeadingSection.test.tsx
+++ b/src/components/elements/textual/HeadingSection/HeadingSection.test.tsx
@@ -67,3 +67,13 @@ it('should accept style prop', () => {
     ).container
   ).toMatchSnapshot()
 })
+
+it('should accept vSpace prop', () => {
+  expect(
+    render(
+      <HeadingSection title={'Some title'} level={1} vSpace={10}>
+        Content section 1
+      </HeadingSection>
+    ).container
+  ).toMatchSnapshot()
+})
diff --git a/src/components/elements/textual/HeadingSection/__snapshots__/HeadingSection.test.tsx.snap b/src/components/elements/textual/HeadingSection/__snapshots__/HeadingSection.test.tsx.snap
index 37f465b3e..1ae0b03a6 100644
--- a/src/components/elements/textual/HeadingSection/__snapshots__/HeadingSection.test.tsx.snap
+++ b/src/components/elements/textual/HeadingSection/__snapshots__/HeadingSection.test.tsx.snap
@@ -43,6 +43,25 @@ exports[`should accept style prop 1`] = `
 </div>
 `;
 
+exports[`should accept vSpace prop 1`] = `
+.emotion-0 {
+  margin-bottom: 10px;
+}
+
+<div>
+  <div
+    class="emotion-1"
+  >
+    <h1
+      class="emotion-0"
+    >
+      Some title
+    </h1>
+    Content section 1
+  </div>
+</div>
+`;
+
 exports[`should render correctly 1`] = `
 .emotion-0 {
   margin-bottom: 1rem;