Small improvements to footer

eea · Mar 1, 2022 · f6d1fdc · f6d1fdc
1 parent 3de0c19
commit f6d1fdc
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 35 deletions.
diff --git a/src/ui/Footer/Contact.jsx b/src/ui/Footer/Contact.jsx
@@ -2,27 +2,21 @@ import React from 'react';
 import { Icon } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 
-const Contact = (props) => {
-  if (props.children) {
-    return <div>{props.children}</div>;
-  }
-  return (
+const Contact = ({ children, contacts, header, address }) =>
+  children?.length ? (
+    children
+  ) : (
     <>
-      <p className="header">{props.contacts.header}</p>
-      {props.contacts.contacts.length > 0 &&
-        props.contacts.contacts.map((contact, index) => (
-          <div className="contact" key={index}>
-            <Icon name={contact.icon} size="big"></Icon>
-            {contact.text}
-          </div>
-        ))}
-      {props.contacts.address && (
-        <p className="address">{props.contacts.address}</p>
-      )}
+      <p className="header">{header}</p>
+      {contacts?.map((contact, index) => (
+        <div className="contact" key={index}>
+          <Icon name={contact.icon} size="big"></Icon>
+          {contact.text}
+        </div>
+      ))}
+      {address && <p className="address">{address}</p>}
     </>
   );
-};
-
 Contact.propTypes = {
   contacts: PropTypes.shape({
     header: PropTypes.string,

diff --git a/src/ui/Footer/Footer.jsx b/src/ui/Footer/Footer.jsx
@@ -32,15 +32,11 @@ const Footer = (props) => {
 };
 
 Footer.Actions = FooterActions;
-
-Footer.Sites = FooterSites;
-
+Footer.Contact = Contact;
 Footer.Header = FooterHeader;
-Footer.SubFooter = SubFooter;
-
+Footer.Sites = FooterSites;
 Footer.Social = Social;
-
-Footer.Contact = Contact;
+Footer.SubFooter = SubFooter;
 
 /**
  * Property types.

diff --git a/src/ui/Footer/Footer.stories.js b/src/ui/Footer/Footer.stories.js
@@ -48,8 +48,11 @@ const Template = (args) => (
           </Grid.Column>
           <Grid.Column mobile={6} tablet={5} computer={4}>
             <div className="item">
-              <Footer.Contact contacts={args.contacts} />
-
+              <Footer.Contact
+                contacts={args.contacts}
+                header={args.contactHeader}
+                address={args.address}
+              />
               <Footer.Social social={args.social} />
             </div>
           </Grid.Column>
@@ -94,12 +97,10 @@ Default.args = {
     { name: 'youtube', link: '/#' },
     { name: 'rss', link: '/#' },
   ],
-  contacts: {
-    header: 'Contact Us',
-    contacts: [
-      { icon: 'comment outline', text: 'Ask your question' },
-      { icon: 'envelope outline', text: 'Sign up to our newsletter' },
-    ],
-    address: 'Kongens Nytorv 6 1050 Copenhagen K (+45) 33 36 71 00',
-  },
+  contactHeader: 'Contact Us',
+  contacts: [
+    { icon: 'comment outline', text: 'Ask your question' },
+    { icon: 'envelope outline', text: 'Sign up to our newsletter' },
+  ],
+  address: 'Kongens Nytorv 6 1050 Copenhagen K (+45) 33 36 71 00',
 };