Add align prop to SocialIcons

GH-455
UNStats · Apr 22, 2020 · 0536777 · 0536777
1 parent bd4bf7a
commit 0536777
Show file tree

Hide file tree

Showing 10 changed files with 123 additions and 44 deletions.
diff --git a/.changeset/twelve-flowers-roll.md b/.changeset/twelve-flowers-roll.md
@@ -0,0 +1,5 @@
+---
+'@undataforum/components': minor
+---
+
+Add align prop to SocialIcons
diff --git a/docs/src/stories/components/EmailIcon.stories.js b/docs/src/stories/components/EmailIcon.stories.js
@@ -1,9 +1,26 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { EmailIcon } from '@undataforum/components';
+import { Box } from 'theme-ui';
 
 storiesOf('Components/EmailIcon', module)
-  .add('default', () => <EmailIcon />)
-  .add('custom size', () => <EmailIcon size={64} />)
-  .add('with title', () => <EmailIcon title="Send us an email" />)
-  .add('responsive size', () => <EmailIcon size={[32, 64, 128]} />);
+  .add('default', () => (
+    <Box sx={{ m: 2 }}>
+      <EmailIcon />
+    </Box>
+  ))
+  .add('custom size', () => (
+    <Box sx={{ m: 2 }}>
+      <EmailIcon size={64} />
+    </Box>
+  ))
+  .add('with title', () => (
+    <Box sx={{ m: 2 }}>
+      <EmailIcon title="Send us an email" />
+    </Box>
+  ))
+  .add('responsive size', () => (
+    <Box sx={{ m: 2 }}>
+      <EmailIcon size={[32, 64, 128]} />
+    </Box>
+  ));
diff --git a/docs/src/stories/components/Footer.stories.js b/docs/src/stories/components/Footer.stories.js
@@ -8,7 +8,7 @@ import DummyLogo from '../../components/dummy-logo';
 
 // Variables defined outside stories are not displayed in story source.
 // This one is for knobs select.
-const variants = ['primary', 'secondary'];
+const variants = ['primary-inverse', 'secondary-inverse'];
 
 storiesOf('Components/Footer', module)
   .addDecorator(withKnobs)
@@ -39,8 +39,8 @@ storiesOf('Components/Footer', module)
               title: 'Send us an email',
             },
           ]}
+          align="center"
           size={48}
-          variant="inherit"
           mb={3}
         />
       }
@@ -50,7 +50,7 @@ storiesOf('Components/Footer', module)
         { text: 'Privacy Notice', href: '/privacy' },
         { text: 'Terms of Use', href: '/terms' },
       ]}
-      variant={select('variant', variants, 'primary')}
+      variant={select('variant', variants, 'primary-inverse')}
     />
   ))
   .add('logo only', () => (
@@ -67,7 +67,7 @@ storiesOf('Components/Footer', module)
         { text: 'Privacy Notice', href: '/privacy-notice' },
         { text: 'Terms of Use', href: '/terms-of-use' },
       ]}
-      variant={select('variant', variants, 'primary')}
+      variant={select('variant', variants, 'primary-inverse')}
     />
   ))
   .add('title only', () => (
@@ -80,7 +80,7 @@ storiesOf('Components/Footer', module)
         { text: 'Privacy Notice', href: '/privacy-notice' },
         { text: 'Terms of Use', href: '/terms-of-use' },
       ]}
-      variant={select('variant', variants, 'primary')}
+      variant={select('variant', variants, 'primary-inverse')}
     />
   ))
   .add('social only', () => (
@@ -104,8 +104,8 @@ storiesOf('Components/Footer', module)
               title: 'Send us an email',
             },
           ]}
+          align="center"
           size={48}
-          variant="inherit"
           mb={3}
         />
       }
@@ -116,7 +116,7 @@ storiesOf('Components/Footer', module)
         { text: 'Privacy Notice', href: '/privacy-notice' },
         { text: 'Terms of Use', href: '/terms-of-use' },
       ]}
-      variant={select('variant', variants, 'primary')}
+      variant={select('variant', variants, 'primary-inverse')}
     />
   ))
   .add('minimalistic', () => (
@@ -128,6 +128,6 @@ storiesOf('Components/Footer', module)
         { text: 'Privacy Notice', href: '/privacy-notice' },
         { text: 'Terms of Use', href: '/terms-of-use' },
       ]}
-      variant={select('variant', variants, 'primary')}
+      variant={select('variant', variants, 'primary-inverse')}
     />
   ));
diff --git a/docs/src/stories/components/GitHubIcon.stories.js b/docs/src/stories/components/GitHubIcon.stories.js
@@ -1,9 +1,26 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { GitHubIcon } from '@undataforum/components';
+import { Box } from 'theme-ui';
 
 storiesOf('Components/GitHubIcon', module)
-  .add('default', () => <GitHubIcon />)
-  .add('custom size', () => <GitHubIcon size={64} />)
-  .add('with title', () => <GitHubIcon title="Follow us on GitHub" />)
-  .add('responsive size', () => <GitHubIcon size={[32, 64, 128]} />);
+  .add('default', () => (
+    <Box sx={{ m: 2 }}>
+      <GitHubIcon />
+    </Box>
+  ))
+  .add('custom size', () => (
+    <Box sx={{ m: 2 }}>
+      <GitHubIcon size={64} />
+    </Box>
+  ))
+  .add('with title', () => (
+    <Box sx={{ m: 2 }}>
+      <GitHubIcon title="Follow us on GitHub" />
+    </Box>
+  ))
+  .add('responsive size', () => (
+    <Box sx={{ m: 2 }}>
+      <GitHubIcon size={[32, 64, 128]} />
+    </Box>
+  ));
diff --git a/docs/src/stories/components/SocialIcons.stories.js b/docs/src/stories/components/SocialIcons.stories.js
@@ -1,9 +1,11 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withKnobs } from '@storybook/addon-knobs';
+import { withKnobs, select } from '@storybook/addon-knobs';
 import { SocialIcons } from '@undataforum/components';
 import { Box } from 'theme-ui';
 
+const alignments = ['start', 'center', 'end'];
+
 storiesOf('Components/SocialIcons', module)
   .addDecorator(withKnobs)
   .add('all social icons', () => (
@@ -21,6 +23,7 @@ storiesOf('Components/SocialIcons', module)
           title: 'Send us an email',
         },
       ]}
+      align={select('align', alignments, 'start')}
       size={48}
       m={2}
     />
@@ -40,6 +43,7 @@ storiesOf('Components/SocialIcons', module)
           title: 'Follow us on Twitter',
         },
       ]}
+      align={select('align', alignments, 'start')}
       size={48}
       m={2}
     />
@@ -58,6 +62,7 @@ storiesOf('Components/SocialIcons', module)
           title: 'Send us an email',
         },
       ]}
+      align={select('align', alignments, 'start')}
       size={48}
       m={2}
     />
@@ -71,6 +76,7 @@ storiesOf('Components/SocialIcons', module)
           title: 'Follow us on Twitter',
         },
       ]}
+      align={select('align', alignments, 'start')}
       size={48}
       m={2}
     />
@@ -95,6 +101,7 @@ storiesOf('Components/SocialIcons', module)
             title: 'Send us an email',
           },
         ]}
+        align={select('align', alignments, 'start')}
         size={48}
       />
     </Box>

diff --git a/docs/src/stories/components/TwitterIcon.stories.js b/docs/src/stories/components/TwitterIcon.stories.js
@@ -1,9 +1,26 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { TwitterIcon } from '@undataforum/components';
+import { Box } from 'theme-ui';
 
 storiesOf('Components/TwitterIcon', module)
-  .add('default', () => <TwitterIcon />)
-  .add('custom size', () => <TwitterIcon size={64} />)
-  .add('with title', () => <TwitterIcon title="Follow us on Twitter" />)
-  .add('responsive size', () => <TwitterIcon size={[32, 64, 128]} />);
+  .add('default', () => (
+    <Box sx={{ m: 2 }}>
+      <TwitterIcon />
+    </Box>
+  ))
+  .add('custom size', () => (
+    <Box sx={{ m: 2 }}>
+      <TwitterIcon size={64} />
+    </Box>
+  ))
+  .add('with title', () => (
+    <Box sx={{ m: 2 }}>
+      <TwitterIcon title="Follow us on Twitter" />
+    </Box>
+  ))
+  .add('responsive size', () => (
+    <Box sx={{ m: 2 }}>
+      <TwitterIcon size={[32, 64, 128]} />
+    </Box>
+  ));
diff --git a/packages/components/src/footer.js b/packages/components/src/footer.js
@@ -16,12 +16,15 @@ const Footer = ({ logo, title, socialIcons, links, variant = 'primary' }) => {
           }}
         >
           {logo && (
-            <Link href="/" variant="inherit" height="100%" mb={[1, 2]}>
+            <Link
+              href="/"
+              sx={{ color: 'inherit', height: '100%', mb: [1, 2] }}
+            >
               {logo}
             </Link>
           )}
           {title && (
-            <Link href="/" variant="inherit">
+            <Link href="/" sx={{ color: 'inherit' }}>
               <Heading
                 sx={{
                   whiteSpace: 'nowrap',
@@ -40,9 +43,7 @@ const Footer = ({ logo, title, socialIcons, links, variant = 'primary' }) => {
               <Link
                 href={link.href}
                 key={link.href}
-                px={[2, 3]}
-                py={[1, 2]}
-                variant="inherit"
+                sx={{ color: 'inherit', px: [2, 3], py: [1, 2] }}
               >
                 <Text sx={{ fontFamily: 'body', textAlign: 'center' }}>
                   {link.text}

diff --git a/packages/components/src/icon.js b/packages/components/src/icon.js
@@ -9,7 +9,6 @@ const Icon = ({ size = 32, ...props }) => (
       display: 'inline-flex',
       alignItems: 'center',
       justifyContent: 'center',
-      padding: 1,
       width: size,
       height: size,
       color: 'inherit',

diff --git a/packages/components/src/profile-preview.js b/packages/components/src/profile-preview.js
@@ -81,8 +81,9 @@ const ProfilePreview = ({
     {profile.socialIcons && (
       <SocialIcons
         platforms={profile.socialIcons}
+        align={align}
         size={32}
-        variant="inherit"
+        mt={2}
       />
     )}
     {profile.badges && (

diff --git a/packages/components/src/social-icons.js b/packages/components/src/social-icons.js
@@ -1,11 +1,12 @@
 import React from 'react';
-import { arrayOf, number, oneOfType, shape, string } from 'prop-types';
-import { Flex } from 'theme-ui';
+import { arrayOf, number, oneOf, oneOfType, shape, string } from 'prop-types';
+import { Box, Flex } from 'theme-ui';
 
 import EmailIcon from './email-icon';
 import GitHubIcon from './github-icon';
 import TwitterIcon from './twitter-icon';
 import Link from './link';
+import { normalizeAlign } from './util';
 
 /**
  * SocialIcons are used like fonts, i.e. they use whatever the inherited color is.
@@ -27,24 +28,37 @@ const lookup = {
   },
 };
 
-const SocialIcons = ({ platforms, size, ...props }) => {
+const SocialIcons = ({ platforms, align = 'start', size, ...props }) => {
   return (
-    <Flex
-      {...props}
-      sx={{ flexWrap: 'wrap', justifyContent: 'center', alignItems: 'center' }}
-    >
-      {platforms.map(({ id, username, title }) => {
-        const { url, Icon } = lookup[id];
-        return (
-          <Link key={id} href={url(username)} sx={{ color: 'inherit', mx: 2 }}>
-            <Icon size={size} title={title} />
-          </Link>
-        );
-      })}
-    </Flex>
+    <Box {...props}>
+      <Flex
+        sx={{
+          flexWrap: 'wrap',
+          justifyContent: normalizeAlign(align),
+          alignItems: 'center',
+          mx: -2,
+        }}
+      >
+        {platforms.map(({ id, username, title }) => {
+          const { url, Icon } = lookup[id];
+          return (
+            <Link
+              key={id}
+              href={url(username)}
+              sx={{ color: 'inherit', mx: 2 }}
+            >
+              <Icon size={size} title={title} />
+            </Link>
+          );
+        })}
+      </Flex>
+    </Box>
   );
 };
 
+const alignments = ['start', 'center', 'end'];
+const alignType = oneOf(alignments);
+
 SocialIcons.propTypes = {
   // Array defines sequence in which social icons are displayed.
   platforms: arrayOf(
@@ -54,6 +68,7 @@ SocialIcons.propTypes = {
       title: string.isRequired,
     })
   ).isRequired,
+  align: oneOfType([alignType, arrayOf(alignType)]),
   size: oneOfType([number, arrayOf(number)]),
 };