feat: add ability to disable external links in the footer (#374)

greymatter-io · Oct 24, 2018 · be83af2 · be83af2
1 parent ca01040
commit be83af2
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 42 deletions.
diff --git a/src/components/AppFooter/AppFooter.js b/src/components/AppFooter/AppFooter.js
@@ -15,56 +15,69 @@ AppFooter.propTypes = {
     PropTypes.element,
     PropTypes.node,
     PropTypes.string
-  ])
+  ]),
+  useExternalLinks: PropTypes.bool
 };
 
 AppFooter.defaultProps = {
   copyrightText:
-    "Copyright \u00A9 2018 Decipher Technology Studios. All rights reserved. \n Copyright \u00A9 2018 Grey Matter, a Decipher Technology Studios product. All rights reserved."
+    "Copyright \u00A9 2018 Decipher Technology Studios. All rights reserved. \n Copyright \u00A9 2018 Grey Matter, a Decipher Technology Studios product. All rights reserved.",
+  useExternalLinks: true
 };
 
 /**
  * Stateless functional React component that renders company branding and social media footer content
  * @returns JSX.Element
  */
-export default function AppFooter({ copyrightText, ...props }) {
+export default function AppFooter({
+  copyrightText,
+  useExternalLinks,
+  ...props
+}) {
+  const logoProps = useExternalLinks
+    ? {
+        href: "http://deciphernow.com",
+        rel: "noopener noreferrer",
+        target: "_blank"
+      }
+    : {};
   return (
     <Footer {...props}>
-      <LongLogo
-        href="http://deciphernow.com"
-        rel="noopener noreferrer"
-        target="_blank"
-        title="Decipher Technology Studios website"
-      >
+      <LongLogo {...logoProps} title="Decipher Technology Studios website">
         <img alt="Decipher Technology Studios" src={longLogo} />
       </LongLogo>
-      <Copyright> {copyrightText} </Copyright>
-      <Links>
-        <Link
-          href="http://github.com/DecipherNow"
-          rel="noopener noreferrer"
-          target="_blank"
-          title="Decipher Technology Studios Github"
-        >
-          <IconGitHub size="20px" />
-        </Link>
-        <Link
-          href="http://twitter.com/deciphernow"
-          rel="noopener noreferrer"
-          target="_blank"
-          title="Decipher Technology Studios Twitter"
-        >
-          <IconTwitter size="20px" />
-        </Link>
-        <Link
-          href="http://www.linkedin.com/company/decipher-technology-studios"
-          rel="noopener noreferrer"
-          target="_blank"
-          title="Decipher Technology Studios LinkedIn"
-        >
-          <IconLinkedIn size="20px" />
-        </Link>
-      </Links>
+      <Copyright useExternalLinks={useExternalLinks}>
+        {" "}
+        {copyrightText}{" "}
+      </Copyright>
+      {useExternalLinks && (
+        <Links>
+          <Link
+            href="http://github.com/DecipherNow"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Decipher Technology Studios Github"
+          >
+            <IconGitHub size="20px" />
+          </Link>
+          <Link
+            href="http://twitter.com/deciphernow"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Decipher Technology Studios Twitter"
+          >
+            <IconTwitter size="20px" />
+          </Link>
+          <Link
+            href="http://www.linkedin.com/company/decipher-technology-studios"
+            rel="noopener noreferrer"
+            target="_blank"
+            title="Decipher Technology Studios LinkedIn"
+          >
+            <IconLinkedIn size="20px" />
+          </Link>
+        </Links>
+      )}
     </Footer>
   );
 }

diff --git a/src/components/AppFooter/AppFooter.stories.js b/src/components/AppFooter/AppFooter.stories.js
@@ -1,14 +1,17 @@
 import React from "react";
 import { storiesOf } from "@storybook/react";
-import { text } from "@storybook/addon-knobs/react";
+import { boolean, text } from "@storybook/addon-knobs/react";
 import AppFooter from "./AppFooter";
 import { withInfo } from "@storybook/addon-info";
 
 const stories = storiesOf("Components|App Footer", module);
 
 stories.add(
   "default",
-  withInfo(
-    "AppFooter for Decipher products. You can supply a `copyrightText` prop which can be an element, node, or string. This can be useful if your app supports i18n. Otherwise, the AppFooter will default to the English copyright text: 'Copyright &copy; 2018 Decipher Technology Studios. All rights reserved. Copyright &copy; 2018 Grey Matter, a Decipher Technology Studios product. All rights reserved.'"
-  )(() => <AppFooter copyrightText={text("copyrightText")} />)
+  withInfo("AppFooter for Grey Matter products.")(() => (
+    <AppFooter
+      copyrightText={text("copyrightText")}
+      useExternalLinks={boolean("useExternalLinks", true)}
+    />
+  ))
 );
diff --git a/src/components/AppFooter/AppFooter.test.js b/src/components/AppFooter/AppFooter.test.js
@@ -1,5 +1,6 @@
 import React from "react";
 import renderer from "react-test-renderer";
+import { shallow } from "enzyme";
 import AppFooter from "./AppFooter.js";
 
 describe("A Footer container", () => {
@@ -8,3 +9,41 @@ describe("A Footer container", () => {
     expect(anAppFooter).toMatchSnapshot();
   });
 });
+
+describe("useExternalLinks is true", () => {
+  const anAppFooter = shallow(<AppFooter useExternalLinks={true} />);
+
+  it("useExternalLinks boolean prop is true", () => {
+    expect(anAppFooter.prop.useExternalLinks).toBeTruthy;
+  });
+
+  it("disables logo link", () => {
+    const footerHtml = anAppFooter.find("LongLogo").html();
+    expect(footerHtml.includes("href")).toBeTruthy;
+    expect(footerHtml.includes("rel")).toBeTruthy;
+    expect(footerHtml.includes("target")).toBeTruthy;
+  });
+
+  it("hides social links", () => {
+    expect(anAppFooter.find("Links")).toBeTruthy;
+  });
+});
+
+describe("useExternalLinks is false", () => {
+  const anAppFooter = shallow(<AppFooter useExternalLinks={false} />);
+
+  it("useExternalLinks boolean prop is false", () => {
+    expect(anAppFooter.prop.useExternalLinks).toBeFalsy;
+  });
+
+  it("disables logo link", () => {
+    const footerHtml = anAppFooter.find("LongLogo").html();
+    expect(footerHtml.includes("href")).toBeFalsy;
+    expect(footerHtml.includes("rel")).toBeFalsy;
+    expect(footerHtml.includes("target")).toBeFalsy;
+  });
+
+  it("hides social links", () => {
+    expect(anAppFooter.find("Links")).toBeFalsy;
+  });
+});
diff --git a/src/components/AppFooter/components/Copyright.js b/src/components/AppFooter/components/Copyright.js
@@ -7,7 +7,7 @@ const Copyright = styled.p`
   font-size: 50%; /* Unique instance of font size. Do not associate with theme variable. */
   margin: 0;
   flex: 0 0 100%;
-  text-align: center;
+  text-align: ${props => (props.useExternalLinks ? "center" : "right")};
   transition: opacity 0.2s ease;
   cursor: default;
   border-top: 1px solid ${COLOR_KEYLINE};

diff --git a/src/components/AppFooter/components/__snapshots__/Copyright.test.js.snap b/src/components/AppFooter/components/__snapshots__/Copyright.test.js.snap
@@ -7,7 +7,7 @@ exports[`Copyright should render when screen is 800px or higher 1`] = `
   -webkit-flex: 0 0 100%;
   -ms-flex: 0 0 100%;
   flex: 0 0 100%;
-  text-align: center;
+  text-align: right;
   -webkit-transition: opacity 0.2s ease;
   transition: opacity 0.2s ease;
   cursor: default;