feat(heading): prop for default margins (#923)

alfa-laboratory · Dec 23, 2019 · 28bafcf · 28bafcf
1 parent ce810a1
commit 28bafcf
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 10 deletions.
diff --git a/src/heading/__snapshots__/heading.test.jsx.snap b/src/heading/__snapshots__/heading.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`heading should render without problem 1`] = `
 <h4
-  className="heading heading_size_s heading_theme_alfa-on-white"
+  className="heading heading_size_s heading_margins heading_theme_alfa-on-white"
 >
   Heading
 </h4>

diff --git a/src/heading/heading.css b/src/heading/heading.css
@@ -1,6 +1,7 @@
 @import '../vars.css';
 
 .heading {
+    margin: 0;
     font-family: var(--font);
     font-weight: var(--font-weight-bold);
 
@@ -9,10 +10,13 @@
     }
 
     &_size_xl {
-        margin: 0 0 var(--gap-xl);
         font-size: var(--font-size-2xl);
         line-height: var(--line-height-condensed);
 
+        &.heading_margins {
+            margin: 0 0 var(--gap-xl);
+        }
+
         @media (--tablet-s) {
             font-size: var(--font-size-3xl);
         }
@@ -24,13 +28,19 @@
     }
 
     &_size_l {
-        margin: var(--gap-3xl) 0 var(--gap-m);
         font-size: var(--font-size-xl);
         line-height: var(--line-height-condensed);
 
+        &.heading_margins {
+            margin: var(--gap-3xl) 0 var(--gap-m);
+        }
+
         @media (--tablet-s) {
-            margin: var(--gap-4xl) 0 var(--gap-xl);
             font-size: var(--font-size-2xl);
+
+            &.heading_margins {
+                margin: var(--gap-4xl) 0 var(--gap-xl);
+            }
         }
 
         @media (--large) {
@@ -39,36 +49,48 @@
     }
 
     &_size_m {
-        margin: var(--gap-3xl) 0 var(--gap-m);
         font-size: var(--font-size-l);
         line-height: var(--line-height-semi-condensed);
 
+        &.heading_margins {
+            margin: var(--gap-3xl) 0 var(--gap-m);
+        }
+
         @media (--tablet-s) {
             font-size: var(--font-size-xl);
             line-height: var(--line-height-condensed);
         }
 
         @media (--large) {
-            margin: var(--gap-4xl) 0 var(--gap-xl);
             font-size: var(--font-size-2xl);
+
+            &.heading_margins {
+                margin: var(--gap-4xl) 0 var(--gap-xl);
+            }
         }
     }
 
     &_size_s {
-        margin: var(--gap-3xl) 0 var(--gap-m);
         font-size: var(--font-size-l);
         line-height: var(--line-height-semi-condensed);
 
+        &.heading_margins {
+            margin: var(--gap-3xl) 0 var(--gap-m);
+        }
+
         @media (--tablet-s) {
             font-size: var(--font-size-xl);
             line-height: var(--line-height-condensed);
         }
     }
 
     &_size_xs {
-        margin: var(--gap-3xl) 0 var(--gap-m);
         font-size: var(--font-size-l);
         line-height: var(--line-height-semi-condensed);
+
+        &.heading_margins {
+            margin: var(--gap-3xl) 0 var(--gap-m);
+        }
     }
 
     & + & {

diff --git a/src/heading/heading.jsx b/src/heading/heading.jsx
@@ -27,6 +27,8 @@ class Heading extends React.Component {
         children: Type.oneOfType([Type.arrayOf(Type.node), Type.node]),
         /** Размер, определяющий какой тег заголовка будет использоваться */
         size: Type.oneOf(['xs', 's', 'm', 'l', 'xl']),
+        /** Дефолтные отступы */
+        hasDefaultMargins: Type.bool,
         /** Тема компонента */
         theme: Type.oneOf(['alfa-on-color', 'alfa-on-white']),
         /** Дополнительный класс */
@@ -38,13 +40,15 @@ class Heading extends React.Component {
     };
 
     static defaultProps = {
-        size: 'xl'
+        size: 'xl',
+        hasDefaultMargins: true
     };
 
     render(cn) {
         const headingProps = {
             className: cn({
-                size: this.props.size
+                size: this.props.size,
+                margins: this.props.hasDefaultMargins
             }),
             id: this.props.id,
             'data-test-id': this.props['data-test-id']