Rework FooterMenu, add vertical padding and let links break on multiple lines. Add a story for the FooterMenu

packages/app/components/footerMenu/FooterMenu.story.tsx

@@ -0,0 +1,20 @@
+import React, { ComponentType, CSSProperties } from 'react';
+import { storiesOf } from '@storybook/react';
+
+import FooterMenu from './FooterMenu';
+
+const PreviewWrapper: ComponentType<{ style?: CSSProperties }> = ({
+  style,
+  children,
+}) => <div style={{ padding: '25px', ...style }}>{children}</div>;
+
+storiesOf('Components', module).add('FooterMenu', () => (
+  <div style={{ display: 'flex' }}>
+    <PreviewWrapper>
+      <FooterMenu />
+    </PreviewWrapper>
+    <PreviewWrapper style={{ backgroundColor: '#232323' }}>
+      <FooterMenu />
+    </PreviewWrapper>
+  </div>
+));

packages/app/components/footerMenu/FooterMenu.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { connect } from 'react-redux';
+import React, { ComponentType, MouseEventHandler, useCallback } from 'react';
+import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 import { FormattedMessage as Message } from 'react-intl';
 import LanguageSwitcher from 'app/components/languageSwitcher';
@@ -9,23 +9,25 @@ import { ContactLink } from 'app/components/contact';
 import styles from './footerMenu.scss';
 import messages from './footerMenu.intl.json';
 
-type Props = {
-  createLanguageSwitcherPopup: () => void;
-};
+const FooterMenu: ComponentType = () => {
+  const dispatch = useDispatch();
+  const onLanguageSwitcherClick = useCallback<MouseEventHandler>(
+    event => {
+      event.preventDefault();
+      dispatch(createPopup({ Popup: LanguageSwitcher }));
+    },
+    [dispatch],
+  );
 
-class FooterMenu extends React.Component<Props> {
-  render() {
   return (
     <div className={styles.footerMenu} data-testid="footer">
-        <Link to="/rules">
+      <Link to="/rules" className={styles.footerItem}>
         <Message {...messages.rules} />
       </Link>
-        {' | '}
-        <ContactLink>
+      <ContactLink className={styles.footerItem}>
         <Message {...messages.contactUs} />
       </ContactLink>
-        {' | '}
-        <Link to="/dev">
+      <Link to="/dev" className={styles.footerItem}>
         <Message {...messages.forDevelopers} />
       </Link>
 
@@ -33,7 +35,7 @@ class FooterMenu extends React.Component<Props> {
         <a
           href="#"
           className={styles.langTrigger}
-            onClick={this.onLanguageSwitcher}
+          onClick={onLanguageSwitcherClick}
         >
           <span className={styles.langTriggerIcon} />
           <Message {...messages.siteLanguage} />
@@ -41,22 +43,6 @@ class FooterMenu extends React.Component<Props> {
       </div>
     </div>
   );
-  }
+};
 
-  onLanguageSwitcher = (event: React.MouseEvent<HTMLElement>) => {
-    event.preventDefault();
-
-    this.props.createLanguageSwitcherPopup();
-  };
-}
-
-// mark this component, as not pure, because it is stateless,
-// but should be re-rendered, if current lang was changed
-export default connect(
-  null,
-  {
-    createLanguageSwitcherPopup: () => createPopup({ Popup: LanguageSwitcher }),
-  },
-  null,
-  { pure: false },
-)(FooterMenu);
+export default FooterMenu;

packages/app/components/footerMenu/footerMenu.scss

@@ -1,16 +1,29 @@
 .footerMenu {
+  padding: 0 25px;
+  text-align: center;
   font-size: 12px;
-  line-height: 1.5;
-  color: #666;
+  // Set line-height the same as the font-size value to keep the border-bottom
+  // close to the text when the inline-block is turned on .footerItem
+  line-height: 12px;
+}
 
-  a {
+.footerItem {
+  display: inline-block;
+  margin: 2px 5px 2px 0;
   color: #666;
   border-bottom-color: #666;
+
+  &:last-of-type {
+    margin-right: 0;
   }
 }
 
 .langTriggerContainer {
-  text-align: center;
+  margin-top: 1px;
+}
+
+.langTrigger {
+  composes: footerItem;
 }
 
 .langTriggerIcon {