fix(Footer): Move main site footer into separate component (#137)

* Move main site footer * move webfontloader into window check * simpler window check * nope
dailybruin · Nov 28, 2018 · efd35cf · efd35cf
1 parent 345e375
commit efd35cf
Show file tree

Hide file tree

Showing 6 changed files with 99 additions and 91 deletions.
diff --git a/src/components/Footer/index.mdx b/src/components/Footer/index.mdx
@@ -8,7 +8,7 @@ import Footer from '.'
 
 # Footer
 
-Every web page needs a footer.
+Every web page needs a footer. Not to be confused with main site's [footer](/main-site-footer).
 
 <PropsTable of={Footer} />
 

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -2,8 +2,6 @@ import * as React from 'react'
 import { css } from 'react-emotion'
 import Heart from './Heart'
 import toSentence from '../../utils/toSentence'
-import ComponentType from '../../globals/typeEnums'
-import MainSiteFooter from './MainSiteFooter'
 
 enum License {
   MIT = 'MIT License',
@@ -20,80 +18,70 @@ interface FooterProps {
   /** The name of the license of the project. */
   license: License
   /** A list of the developers who created the site. */
-  developers: string | Array<string>
+  developers: string | string[]
   /** The year that the story was published, e.g., 2018. */
   copyrightYear: number
-  /** What type of project this footer is being used in. */
-  footerType: ComponentType
   /** Custom css for the footer component */
   style?: string
 }
 
 /** A footer to go at the bottom of every page. */
 class Footer extends React.Component<FooterProps> {
-  static defaultProps = {
+  public static defaultProps = {
     license: License.Copyright,
-    footerType: ComponentType.Default,
   }
 
-  render() {
-    if (this.props.footerType === ComponentType.Default) {
-      return (
-        <footer
-          className={css`
-            display: grid;
-            grid-template-columns: 1fr;
-            grid-template-rows: auto auto;
-            justify-content: center;
-            margin: 1rem 0;
-            padding: 0 0.4rem;
-            text-align: center;
+  public render() {
+    return (
+      <footer
+        className={css`
+          display: grid;
+          grid-template-columns: 1fr;
+          grid-template-rows: auto auto;
+          justify-content: center;
+          margin: 1rem 0;
+          padding: 0 0.4rem;
+          text-align: center;
 
-            @media (max-width: 600px) {
-              font-size: 0.8rem;
-            }
-            ${this.props.style};
-          `}
-        >
-          <div>
-            <span>
-              Content copyright © {this.props.copyrightYear} Daily Bruin.
-            </span>{' '}
-            {!!this.props.githubName && (
-              <span
-                className={css`
-                  @media (max-width: 600px) {
-                    display: none;
-                  }
-                `}
+          @media (max-width: 600px) {
+            font-size: 0.8rem;
+          }
+          ${this.props.style};
+        `}
+      >
+        <div>
+          <span>
+            Content copyright © {this.props.copyrightYear} Daily Bruin.
+          </span>{' '}
+          {!!this.props.githubName && (
+            <span
+              className={css`
+                @media (max-width: 600px) {
+                  display: none;
+                }
+              `}
+            >
+              Site code available on{' '}
+              <a
+                href={`https://github.com/dailybruin/${this.props.githubName}`}
               >
-                Site code available on{' '}
-                <a
-                  href={`https://github.com/dailybruin/${
-                    this.props.githubName
-                  }`}
-                >
-                  GitHub
-                </a>
-                {this.props.license === License.Copyright
-                  ? '.'
-                  : ` and available under the ${this.props.license}.`}
-              </span>
-            )}
-          </div>
-          <div>
-            Built with Suzy’s <Heart /> in Kerckhoff 118 by{' '}
-            {typeof this.props.developers === 'string'
-              ? this.props.developers
-              : toSentence(this.props.developers)}
-            .
-          </div>
-        </footer>
-      )
-    } /** this.props.footerType === ComponentType.MainSite */ else {
-      /** This should be updated if more typeEnums are added */
-      return <MainSiteFooter />
-    }
+                GitHub
+              </a>
+              {this.props.license === License.Copyright
+                ? '.'
+                : ` and available under the ${this.props.license}.`}
+            </span>
+          )}
+        </div>
+        <div>
+          Built with Suzy’s <Heart /> in Kerckhoff 118 by{' '}
+          {typeof this.props.developers === 'string'
+            ? this.props.developers
+            : toSentence(this.props.developers)}
+          .
+        </div>
+      </footer>
+    )
   }
 }
 

diff --git a/src/components/MainSiteFooter/index.mdx b/src/components/MainSiteFooter/index.mdx
@@ -0,0 +1,17 @@
+---
+name: Main Site Footer
+route: /main-site-footer
+---
+
+import { Playground, PropsTable } from 'docz'
+import MainSiteFooter from '.'
+
+# MainSiteFooter
+
+A footer for the main site. Not to be confused with our other [footer](/footer).
+
+<PropsTable of={MainSiteFooter} />
+
+<Playground>
+  <MainSiteFooter />
+</Playground>
diff --git a/src/components/Footer/MainSiteFooter.tsx → src/components/MainSiteFooter/index.tsx b/src/components/Footer/MainSiteFooter.tsx → src/components/MainSiteFooter/index.tsx
@@ -1,26 +1,22 @@
 import * as React from 'react'
 import { css } from 'react-emotion'
 import * as MainSiteStyles from '../../globals/mainsiteGlobalStyles'
-import FooterLink from './FooterLink'
+import FooterLink from '../Footer/FooterLink'
 
 export default function MainSiteFooter(props: {}) {
   const mainSiteFooterLinks = [
-    {text:'About', url:'https://dailybruin.com/about'},
-    {text:'Contact', url:'https://dailybruin.com/contact'},
-    {text:'Advertise', url:'https://dailybruin.com/advertise'},
-    {text:'Work With Us', url:'https://apply.uclastudentmedia.com'},
-    {text:'Privacy', url:'https://dailybruin.com/privacy'}
-  ];
+    { text: 'About', url: 'https://dailybruin.com/about' },
+    { text: 'Contact', url: 'https://dailybruin.com/contact' },
+    { text: 'Advertise', url: 'https://dailybruin.com/advertise' },
+    { text: 'Work With Us', url: 'https://apply.uclastudentmedia.com' },
+    { text: 'Privacy', url: 'https://dailybruin.com/privacy' },
+  ]
 
-  let renderedLinks = mainSiteFooterLinks.map((link) =>
-  <FooterLink
-    key={link.text}
-    url={link.url}
-    text={link.text}
-  />
-  );
+  const renderedLinks = mainSiteFooterLinks.map(link => (
+    <FooterLink key={link.text} url={link.url} text={link.text} />
+  ))
 
-  const currentYear = (new Date()).getFullYear();
+  const currentYear = new Date().getFullYear()
 
   return (
     <footer
@@ -34,19 +30,21 @@ export default function MainSiteFooter(props: {}) {
         border-top: 5px solid black;
 
         ${MainSiteStyles.mediaMobileBreakpoint} {
-            flex-direction: column;
+          flex-direction: column;
         }
-      `}>
+      `}
+    >
       <div
         className={css`
-        display: flex;
-        flex-direction: row;
+          display: flex;
+          flex-direction: row;
 
-        ${MainSiteStyles.mediaMobileBreakpoint} {
-          flex-direction: column;
-          text-align: center;
-        }
-      `}>
+          ${MainSiteStyles.mediaMobileBreakpoint} {
+            flex-direction: column;
+            text-align: center;
+          }
+        `}
+      >
         {renderedLinks}
       </div>
       <div
@@ -59,8 +57,9 @@ export default function MainSiteFooter(props: {}) {
             text-align: center;
             margin: auto;
           }
-        `}>
-          Copyright © {currentYear} Daily Bruin
+        `}
+      >
+        Copyright © {currentYear} Daily Bruin
       </div>
     </footer>
   )

diff --git a/src/index.ts b/src/index.ts
@@ -14,6 +14,7 @@ export { default as Footer } from './components/Footer'
 export { default as Head } from './components/Head'
 export { default as Headline } from './components/Headline'
 export { default as Image } from './components/Image'
+export { default as MainSiteFooter } from './components/MainSiteFooter'
 export { default as PullQuote } from './components/PullQuote'
 export { default as StoryList } from './components/StoryList'
 export { default as Video } from './components/Video'

diff --git a/tslint.json b/tslint.json
@@ -5,5 +5,8 @@
     "tslint-eslint-rules",
     "tslint-config-prettier"
   ],
-  "rules": { "interface-name": [true, "never-prefix"] }
+  "rules": {
+    "interface-name": [true, "never-prefix"],
+    "ordered-imports": false
+  }
 }