Merge pull request #2103 from veteransaffairscanada/beta_banner_styling

Refactoring beta banner to update styling
veteransaffairscanada · Apr 18, 2019 · 258eebf · 258eebf
2 parents b31b06e + dbb9a51
commit 258eebf
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 39 deletions.
diff --git a/components/BB.js b/components/BB.js
@@ -18,7 +18,6 @@ import Header from "./typography/header";
 import NextSteps from "./next_steps";
 import QuickLinks from "./quick_links";
 import StickyHeader from "./sticky_header";
-import AlphaBanner from "./alpha_banner";
 import SelectionsEditor from "./selections_editor";
 
 const divider = css`
@@ -96,8 +95,14 @@ export class BB extends Component {
             pageTitle={t("breadcrumbs.ben_dir_page_title")}
           />
         </div>
-        <Paper id={this.props.id} padding="md" styles={innerDiv}>
-          <AlphaBanner t={t} url={url} />
+        <Paper
+          id={this.props.id}
+          padding="md"
+          styles={innerDiv}
+          url={url}
+          t={t}
+          includeBanner={true}
+        >
           <Grid container spacing={32}>
             <Grid item xs={12}>
               <Header headingLevel="h1" size="xl">

diff --git a/components/alpha_banner.js b/components/alpha_banner.js
@@ -12,19 +12,16 @@ const white = css`
   }
 `;
 
-const bottomMargin = css`
-  margin-bottom: 24px;
-`;
-
 const Banner = css`
   display: flex;
   display: -ms-flexbox;
   align-items: center;
   -ms-flex-align: center;
-  padding-bottom: 24px;
-  border-bottom: 4px solid ${globalTheme.colour.darkPaleGrey};
+  background-color: ${globalTheme.colour.paleGreyTwo};
+  border-top: 8px solid ${globalTheme.colour.borderGreen};
   color: ${globalTheme.colour.charcoalGrey};
-  font-family: ${globalTheme.fontFamilySerif};
+  font-family: ${globalTheme.fontFamilySansSerif};
+  padding: 10px 30px 10px;
   span:first-of-type {
     font-weight: 700 !important;
     padding: 0.2rem 0.7rem;
@@ -40,17 +37,15 @@ export class AlphaBanner extends Component {
   render() {
     const { t, url, ...rest } = this.props;
     return (
-      <div className={bottomMargin}>
-        <aside {...rest} className={Banner}>
-          <PhaseBadge phase={t("header.beta")} />
-          <span>
-            {t("beta_banner.main")} &nbsp;
-            <Link href={{ pathname: "/feedback", query: url.query }}>
-              <a className={white}>{t("beta_banner.link_text")}</a>
-            </Link>
-          </span>
-        </aside>
-      </div>
+      <aside {...rest} className={Banner}>
+        <PhaseBadge phase={t("header.beta")} />
+        <span>
+          {t("beta_banner.main")} &nbsp;
+          <Link href={{ pathname: "/feedback", query: url.query }}>
+            <a className={white}>{t("beta_banner.link_text")}</a>
+          </Link>
+        </span>
+      </aside>
     );
   }
 }

diff --git a/components/favourites.js b/components/favourites.js
@@ -19,7 +19,6 @@ import Cookies from "universal-cookie";
 import Paper from "./paper";
 import StickyHeader from "./sticky_header";
 import QuickLinks from "./quick_links";
-import AlphaBanner from "./alpha_banner";
 
 const divider = css`
   border-top: 2px solid ${globalTheme.colour.duckEggBlue};
@@ -98,8 +97,13 @@ export class Favourites extends Component {
             breadcrumbs={breadcrumbs}
             pageTitle={t("index.your_saved_benefits")}
           />
-          <Paper padding="md" styles={innerDiv}>
-            <AlphaBanner t={t} url={url} />
+          <Paper
+            padding="md"
+            styles={innerDiv}
+            url={url}
+            t={t}
+            includeBanner={true}
+          >
             <Grid container spacing={32}>
               <Grid item xs={12}>
                 <Header css={"BenefitsCounter"} size="xl" headingLevel="h1">

diff --git a/components/guided_experience.js b/components/guided_experience.js
@@ -16,7 +16,6 @@ import { showQuestion, getPageName } from "../utils/common";
 import HeaderButton from "./header_button";
 import Button from "./button";
 import Link from "next/link";
-import { AlphaBanner } from "./alpha_banner";
 
 const greyBox = css`
   background-color: ${globalTheme.colour.paleGreyTwo};
@@ -195,8 +194,7 @@ export class GuidedExperience extends Component {
             pageTitle={t("ge.Find benefits and services")}
           />
         </div>
-        <Paper padding="md" styles={box}>
-          <AlphaBanner t={t} url={url} />
+        <Paper padding="md" styles={box} url={url} t={t} includeBanner={true}>
           <Grid container spacing={24} role="form">
             {id === "patronType" ? (
               <React.Fragment>

diff --git a/components/paper.js b/components/paper.js
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 /** @jsx jsx */
 import { css, jsx } from "@emotion/core";
 import { globalTheme } from "../theme";
+import AlphaBanner from "./alpha_banner";
 
 class Paper extends Component {
   padding = { sm: "24px", md: "30px", lg: "63px", xl: "96px" };
@@ -13,17 +14,30 @@ class Paper extends Component {
     background-color: white;
     box-sizing: border-box;
     width: 100%;
-    border-top: 8px solid ${globalTheme.colour.borderGreen};
     @media only screen and (max-width: ${globalTheme.max.xs}) {
       padding: ${this.paddingMobile[this.props.padding]};
     }
   `;
+  bannerStyle = css`
+    box-shadow: ${globalTheme.boxShadow};
+    box-sizing: border-box;
+  `;
+
   render() {
     return (
-      <div
-        css={this.props.styles ? [this.style, this.props.styles] : [this.style]}
-      >
-        {this.props.children}
+      <div>
+        <div css={this.bannerStyle}>
+          {this.props.includeBanner && this.props.url && this.props.t ? (
+            <AlphaBanner t={this.props.t} url={this.props.url} />
+          ) : null}
+        </div>
+        <div
+          css={
+            this.props.styles ? [this.style, this.props.styles] : [this.style]
+          }
+        >
+          {this.props.children}
+        </div>
       </div>
     );
   }
@@ -36,7 +50,10 @@ Paper.propTypes = {
     PropTypes.string,
     PropTypes.object,
     PropTypes.array
-  ])
+  ]),
+  url: PropTypes.object,
+  t: PropTypes.func,
+  includeBanner: PropTypes.bool
 };
 
 export default Paper;
diff --git a/pages/feedback.js b/pages/feedback.js
@@ -14,7 +14,6 @@ import TextArea from "../components/text_area";
 import Details from "../components/details";
 require("isomorphic-fetch");
 import Raven from "raven-js";
-import AlphaBanner from "../components/alpha_banner";
 import Link from "next/link";
 import BreadCrumbs from "../components/breadcrumbs";
 import { getGuidedExperienceUrl } from "../selectors/urls";
@@ -126,8 +125,14 @@ export class Feedback extends Component {
               pageTitle={t("feedback.page_header")}
             />
           </div>
-          <Paper id="feedbackPagePaper" padding="md" styles={innerDiv}>
-            <AlphaBanner t={t} url={url} />
+          <Paper
+            id="feedbackPagePaper"
+            padding="md"
+            styles={innerDiv}
+            url={url}
+            t={t}
+            includeBanner={true}
+          >
             <form>
               <Header styles={headerPadding} headingLevel="h1" size="lg">
                 {t("feedback.page_header")}

diff --git a/pages/summary.js b/pages/summary.js
@@ -19,7 +19,6 @@ import GuidedExperienceSummary from "../components/guided_experience_summary";
 import Body from "../components/typography/body";
 import { getFilteredBenefits } from "../selectors/benefits";
 import { getGuidedExperienceUrl } from "../selectors/urls";
-import AlphaBanner from "../components/alpha_banner";
 
 const box = css`
   padding: 63px 63px 63px 63px;
@@ -76,8 +75,7 @@ export class Summary extends Component {
               pageTitle={t("ge.Find benefits and services")}
             />
           </div>
-          <Paper padding="md" styles={box}>
-            <AlphaBanner t={t} url={url} />
+          <Paper padding="md" styles={box} url={url} t={t} includeBanner={true}>
             <Grid container spacing={24}>
               <Grid item xs={12} css={questions}>
                 <Header size="md_lg" headingLevel="h2">