share icons (always minimal)

Author: RoyEJohnson

src/app/components/share/facebook-script.js

@@ -0,0 +1,9 @@
+/* eslint-disable */
+(function(d, s, id) {
+  var js, fjs = d.getElementsByTagName(s)[0];
+  if (d.getElementById(id) || !fjs) return;
+  js = d.createElement(s); js.id = id;
+  js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8';
+  fjs.parentNode.insertBefore(js, fjs);
+}(document, 'script', 'facebook-jssdk'));
+/* eslint-enable */

src/app/components/share/share.scss

@@ -6,31 +6,32 @@ $linkedin-blue: #0077b5;
 
 .share-buttons {
     .buttons {
-        display: flex;
+        display: grid;
+        grid-gap: 1rem;
         justify-content: center;
-        margin: 1rem 0;
-
-        &:not(.minimal) {
-            width: 100%;
-        }
+        margin: 0;
 
         @include width-up-to($phone-max) {
             flex-direction: column;
             width: auto;
         }
+        $button-size: 3.2rem;
 
         .btn {
             @extend %button;
             @extend %secondary;
 
             align-items: center;
             background-image: none;
-            display: flex;
+            border-radius: 50%;
+            display: grid;
             font-weight: normal;
-            justify-content: flex-start;
-            margin: 1rem 0.5rem;
-            padding-left: 1.5rem;
+            height: $button-size;
+            justify-content: center;
+            margin: 0;
+            padding: 0;
             text-transform: none;
+            width: $button-size;
 
             &.facebook {
                 background-color: $facebook-blue;
@@ -46,32 +47,8 @@ $linkedin-blue: #0077b5;
 
             .social-icon {
                 color: text-color(white);
-                margin-right: 1rem;
-                transform: scale(1.5);
-            }
-        }
-
-        &.minimal {
-            display: grid;
-            grid-gap: 1rem;
-            justify-content: center;
-            margin: 0;
-
-            $button-size: 3.2rem;
-            .btn {
-                align-items: center;
-                border-radius: 50%;
-                display: grid;
-                height: $button-size;
-                justify-content: center;
                 margin: 0;
-                padding: 0;
-                width: $button-size;
-
-                .social-icon {
-                    margin: 0;
-                    transform: none;
-                }
+                transform: none;
             }
         }
     }

src/app/components/share/share.js renamed to src/app/components/share/share.tsx

@@ -1,32 +1,34 @@
 import React from 'react';
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import {IconDefinition} from '@fortawesome/fontawesome-svg-core';
 import {faFacebookF} from '@fortawesome/free-brands-svg-icons/faFacebookF';
 import {faXTwitter} from '@fortawesome/free-brands-svg-icons/faXTwitter';
 import {faLinkedinIn} from '@fortawesome/free-brands-svg-icons/faLinkedinIn';
+import './facebook-script';
 import './share.scss';
 
-/* eslint-disable */
-(function(d, s, id) {
-  var js, fjs = d.getElementsByTagName(s)[0];
-  if (d.getElementById(id) || !fjs) return;
-  js = d.createElement(s); js.id = id;
-  js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.8';
-  fjs.parentNode.insertBefore(js, fjs);
-}(document, 'script', 'facebook-jssdk'));
-/* eslint-enable */
+type ButtonData = {
+    aClass: string;
+    url: string;
+    icon: IconDefinition;
+    iconLabel: string;
+    target?: string;
+}
 
-function SocialLink({minimal, aClass, url, icon, iconLabel, target}) {
+function SocialLink({aClass, url, icon, iconLabel, target}: ButtonData) {
     return (
-        <a className={aClass} target={target} href={url}>
+        <a className={aClass} target={target} href={url} aria-label={iconLabel}>
             <FontAwesomeIcon className="social-icon" icon={icon} />
-            {
-                !minimal && <span>{iconLabel}</span>
-            }
         </a>
     );
 }
 
-function ShareInterior({pageUrl, message, minimal}) {
+type Props = {
+    pageUrl: string;
+    message: string;
+}
+
+function ShareInterior({pageUrl, message}: Props) {
     const buttonData = [
         {
             aClass: 'fb-xfbml-parse-ignore facebook btn',
@@ -50,25 +52,25 @@ function ShareInterior({pageUrl, message, minimal}) {
     ];
 
     return (
-        <div className={`buttons ${minimal ? 'minimal' : ''}`}>
+        <div className='buttons'>
             <div
                 className="fb-share-button"
                 data-href="https://developers.facebook.com/docs/plugins/"
                 data-layout="link"
                 data-mobile-iframe="true"
             >
-                <SocialLink {...buttonData[0]} minimal={minimal} />
+                <SocialLink {...buttonData[0]} />
             </div>
             {
                 buttonData.slice(1).map((data) =>
-                    <SocialLink {...data} minimal={minimal} key={data} />
+                    <SocialLink {...data} key={data.url} />
                 )
             }
         </div>
     );
 }
 
-export function ShareJsx(props) {
+export function ShareJsx(props: Props) {
     return (
         <div className='share-buttons'>
             <ShareInterior {...props} />

src/app/pages/blog/article/article.tsx

@@ -220,7 +220,6 @@ function ShareButtons() {
             message={encodeURIComponent(
                 'Check out this OpenStax blog article!'
             )}
-            minimal={true}
         />
     );
 }