fix(pageHeader): issues/305 add bottom margin to h1 (#357)

* build, platform package update for h1 * pageHeader, pf class added * style, file names for consistency
RedHatInsights · Aug 17, 2020 · 868fcb1 · 868fcb1
1 parent da01398
commit 868fcb1
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 18 deletions.
diff --git a/package.json b/package.json
@@ -83,7 +83,7 @@
     "@patternfly/react-styles": "4.5.0",
     "@patternfly/react-table": "4.12.1",
     "@patternfly/react-tokens": "4.6.0",
-    "@redhat-cloud-services/frontend-components": "2.3.1",
+    "@redhat-cloud-services/frontend-components": "2.3.11",
     "@redhat-cloud-services/frontend-components-notifications": "2.1.1",
     "@redhat-cloud-services/frontend-components-utilities": "2.1.0",
     "axios": "^0.19.2",

diff --git a/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap b/src/components/authentication/__tests__/__snapshots__/authentication.test.js.snap
@@ -75,16 +75,17 @@ exports[`Authentication Component should render a non-connected component error:
             widget-type="InsightsPageHeader"
           >
             <PageHeaderTitle
+              className="pf-u-mb-sm"
               title="Subscription Watch"
             >
               <Title
-                className=""
+                className="pf-u-mb-sm"
                 headingLevel="h1"
                 size="2xl"
                 widget-type="InsightsPageHeaderTitle"
               >
                 <h1
-                  className="pf-c-title pf-m-2xl"
+                  className="pf-c-title pf-m-2xl pf-u-mb-sm"
                   widget-type="InsightsPageHeaderTitle"
                 >
                    

diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageHeader.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageHeader.test.js.snap
@@ -10,6 +10,7 @@ exports[`PageHeader Component should render a basic component: basic 1`] = `
       widget-type="InsightsPageHeader"
     >
       <PageHeaderTitle
+        className="pf-u-mb-sm"
         title={
           <span
             className="test"
@@ -19,13 +20,13 @@ exports[`PageHeader Component should render a basic component: basic 1`] = `
         }
       >
         <Title
-          className=""
+          className="pf-u-mb-sm"
           headingLevel="h1"
           size="2xl"
           widget-type="InsightsPageHeaderTitle"
         >
           <h1
-            className="pf-c-title pf-m-2xl"
+            className="pf-c-title pf-m-2xl pf-u-mb-sm"
             widget-type="InsightsPageHeaderTitle"
           >
              
@@ -53,16 +54,17 @@ exports[`PageHeader Component should render string node types: string 1`] = `
       widget-type="InsightsPageHeader"
     >
       <PageHeaderTitle
+        className="pf-u-mb-sm"
         title="dolor sit"
       >
         <Title
-          className=""
+          className="pf-u-mb-sm"
           headingLevel="h1"
           size="2xl"
           widget-type="InsightsPageHeaderTitle"
         >
           <h1
-            className="pf-c-title pf-m-2xl"
+            className="pf-c-title pf-m-2xl pf-u-mb-sm"
             widget-type="InsightsPageHeaderTitle"
           >
              
@@ -86,16 +88,17 @@ exports[`PageHeader Component should render the subtitle when viewId is provided
       widget-type="InsightsPageHeader"
     >
       <PageHeaderTitle
+        className="pf-u-mb-sm"
         title="lorem"
       >
         <Title
-          className=""
+          className="pf-u-mb-sm"
           headingLevel="h1"
           size="2xl"
           widget-type="InsightsPageHeaderTitle"
         >
           <h1
-            className="pf-c-title pf-m-2xl"
+            className="pf-c-title pf-m-2xl pf-u-mb-sm"
             widget-type="InsightsPageHeaderTitle"
           >
              

diff --git a/src/components/pageLayout/__tests__/__snapshots__/pageLayout.test.js.snap b/src/components/pageLayout/__tests__/__snapshots__/pageLayout.test.js.snap
@@ -31,16 +31,17 @@ exports[`PageLayout Component should render header and section children: multipl
         widget-type="InsightsPageHeader"
       >
         <PageHeaderTitle
+          className="pf-u-mb-sm"
           title="lorem"
         >
           <Title
-            className=""
+            className="pf-u-mb-sm"
             headingLevel="h1"
             size="2xl"
             widget-type="InsightsPageHeaderTitle"
           >
             <h1
-              className="pf-c-title pf-m-2xl"
+              className="pf-c-title pf-m-2xl pf-u-mb-sm"
               widget-type="InsightsPageHeaderTitle"
             >
                

diff --git a/src/components/pageLayout/pageHeader.js b/src/components/pageLayout/pageHeader.js
@@ -18,7 +18,7 @@ import { translate } from '../i18n/i18n';
  */
 const PageHeader = ({ children, viewId }) => (
   <RcsPageHeader>
-    <PageHeaderTitle title={children} />
+    <PageHeaderTitle title={children} className="pf-u-mb-sm" />
     {viewId && (
       <p>
         {translate(`curiosity-view.${viewId}Subtitle`, {}, [

diff --git a/src/styles/_common.scss → src/styles/_fade.scss b/src/styles/_common.scss → src/styles/_fade.scss
diff --git a/src/styles/_app.scss → src/styles/_page-layout.scss b/src/styles/_app.scss → src/styles/_page-layout.scss
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -8,8 +8,8 @@
  */
 
 // App
-@import 'app';
-@import 'common';
+@import 'page-layout';
+@import 'fade';
 @import 'optin';
 @import 'usage-graph';
 @import 'tour';

diff --git a/yarn.lock b/yarn.lock
@@ -1619,10 +1619,10 @@
     commander ">=2.20.0"
     react-content-loader ">=3.4.1"
 
-"@redhat-cloud-services/frontend-components@2.3.1":
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components/-/frontend-components-2.3.1.tgz#63ee52f53c2fbbc2cceb5a32398a86602240f22e"
-  integrity sha512-woo9ajFqjcRoC5+Y3QU04JIXgzX4SkiIxRO5UFe8AC310g8n+ec1jZDI+OFxaeupGULaOP53BqVzRrZUBoadKg==
+"@redhat-cloud-services/frontend-components@2.3.11":
+  version "2.3.11"
+  resolved "https://registry.yarnpkg.com/@redhat-cloud-services/frontend-components/-/frontend-components-2.3.11.tgz#1761687b4a46b894a47493b848abb3064ca4cb83"
+  integrity sha512-EHw+u7/1MZkfpvyqaiyIblxI4Rsh1osGfZUwPm7hiJAOMOUCnpk1jrrzSiC6QORuiAUJ0aSnCRgVAnb3RduPxw==
   dependencies:
     "@redhat-cloud-services/frontend-components-utilities" "*"
     sanitize-html "^1.25.0"