feat: 💄 add option to fill social buttons

filipowm · Jul 3, 2020 · d345364 · d345364
1 parent 98750c7
commit d345364
Showing 1 changed file with 58 additions and 32 deletions.
diff --git a/src/components/Header/social.js b/src/components/Header/social.js
@@ -1,38 +1,64 @@
-
 import * as SocialButtons from '../Buttons/Social';
 
 const SocialButtonsBuilder = (baseProps) => {
-    const iconBaseProps = baseProps;
-    const buttons = [];
-    const create = (config, name, linkFn, titleFn) => {
-        if (config && config.length > 0) {
-            const btn = SocialButtons[name];
-            if (btn) {
-                const link = linkFn(config);
-                const title = titleFn ? titleFn(name) : `Follow on ${name}`;
-                buttons.push(btn({link: link, key: `${name}-social`, title: title, ...iconBaseProps}))
-            }
-        }
-    }
-    const get = () => buttons;
-    return {
-        get: get,
-        create: create
+  const iconBaseProps = baseProps;
+  const buttons = [];
+  const create = (config, name, optConfig) => {
+    if (config && config.length > 0) {
+      const btn = SocialButtons[name];
+      if (btn) {
+        const link = optConfig && optConfig.linkFn ? optConfig.linkFn(config) : config;
+        const title =
+          optConfig && optConfig.titleFn ? optConfig.titleFn(name) : `Follow on ${name}`;
+        const additionalProps =
+          optConfig && optConfig.additionalProps ? optConfig.additionalProps : {};
+        buttons.push(
+          btn({
+            link: link,
+            key: `${name}-social`,
+            title: title,
+            ...iconBaseProps,
+            ...additionalProps,
+          })
+        );
+      }
     }
-}
+  };
+  const get = () => buttons;
+  return {
+    get: get,
+    create: create,
+  };
+};
 
 export default (iconBaseProps, socialConfig) => {
-    const buttons = SocialButtonsBuilder(iconBaseProps);
-    buttons.create(socialConfig.facebook, 'Facebook', link => link);
-    buttons.create(socialConfig.github, 'Github', link => link);
-    buttons.create(socialConfig.gitlab, 'Gitlab', link => link);
-    buttons.create(socialConfig.instagram, 'Instagram', link => link);
-    buttons.create(socialConfig.linkedin, 'Linkedin', link => link);
-    buttons.create(socialConfig.mail, 'Mail', address => `mailto:${address}`, name => `Send email to owner`);
-    buttons.create(socialConfig.gmail, 'Mail', address => `https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=${address}`, name => `Send email to owner`);
-    buttons.create(socialConfig.slack, 'Slack', link => link);
-    buttons.create(socialConfig.twitch, 'Twitch', link => link);
-    buttons.create(socialConfig.twitter, 'Twitter', link => link);
-    buttons.create(socialConfig.youtube, 'Youtube', link => link);
-    return buttons.get();
-  };
+  const buttons = SocialButtonsBuilder(iconBaseProps);
+  buttons.create(socialConfig.facebook, 'Facebook');
+  buttons.create(socialConfig.github, 'Github');
+  buttons.create(socialConfig.gitlab, 'Gitlab');
+  buttons.create(socialConfig.instagram, 'Instagram');
+  buttons.create(socialConfig.linkedin, 'Linkedin', {
+    additionalProps: {
+      fill: iconBaseProps.stroke,
+      hoverFill: iconBaseProps.hoverStroke,
+    },
+  });
+  buttons.create(socialConfig.mail, 'Mail', {
+    linkFn: (address) => `mailto:${address}`,
+    titleFn: (name) => `Send email to owner`,
+  });
+  buttons.create(socialConfig.gmail, 'Mail', {
+    linkFn: (address) => `https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=${address}`,
+    titleFn: (name) => `Send email to owner`,
+  });
+  buttons.create(socialConfig.slack, 'Slack');
+  buttons.create(socialConfig.twitch, 'Twitch');
+  buttons.create(socialConfig.twitter, 'Twitter', {
+    additionalProps: {
+      fill: iconBaseProps.stroke,
+      hoverFill: iconBaseProps.hoverStroke,
+    },
+  });
+  buttons.create(socialConfig.youtube, 'Youtube');
+  return buttons.get();
+};