Add Reddit icon and update X icon (#418)

Does not update uses of the word "Twitter" in code to avoid making a breaking change.

src/scss/_components.scss

@@ -54,6 +54,7 @@
 @import 'components/IconSocialInstagram';
 @import 'components/IconSocialTwitter';
 @import 'components/IconSocialYoutube';
+@import 'components/IconSocialReddit';
 @import 'components/IconStop';
 @import 'components/IconTime';
 @import 'components/IconUser';

src/scss/components/_BaseButton.scss

@@ -79,6 +79,14 @@
         @apply bg-youtube border-youtube;
       }
     }
+
+    &.-reddit {
+      @apply to-reddit-w50;
+
+      @include hover {
+        @apply bg-reddit border-reddit;
+      }
+    }
   }
 
   &.-compact {

src/scss/components/_IconSocialReddit.scss

@@ -0,0 +1,4 @@
+.IconSocialReddit {
+  width: 1em;
+  height: 1em;
+}

storybook/stories/components/BaseButton/BaseButton.js

@@ -5,6 +5,7 @@ import { IconSocialFacebookTemplate } from '../Icons/IconSocialFacebook'
 import { IconSocialTwitterTemplate } from '../Icons/IconSocialTwitter'
 import { IconSocialInstagramTemplate } from '../Icons/IconSocialInstagram'
 import { IconSocialYoutubeTemplate } from '../Icons/IconSocialYoutube'
+import { IconSocialRedditTemplate } from '../Icons/IconSocialReddit'
 import { IconExpandTemplate } from '../Icons/IconExpand'
 import { IconExternalTemplate } from '../Icons/IconExternal'
 import { IconDropdownTemplate } from '../Icons/IconDropdown'
@@ -37,6 +38,7 @@ export const BaseButtonTemplate = ({
   else if (icon == 'twitter') iconTemplate = IconSocialTwitterTemplate({})
   else if (icon == 'instagram') iconTemplate = IconSocialInstagramTemplate({})
   else if (icon == 'youtube') iconTemplate = IconSocialYoutubeTemplate({})
+  else if (icon == 'reddit') iconTemplate = IconSocialRedditTemplate({})
   else if (icon == 'external') iconTemplate = IconExternalTemplate({})
   else if (icon == 'dropdown') iconTemplate = IconDropdownTemplate({})
   else if (caret) iconTemplate = IconCaretTemplate({})

storybook/stories/components/BaseButton/BaseButton.stories.js

@@ -81,6 +81,7 @@ export default {
           'twitter',
           'instagram',
           'youtube',
+          'reddit',
           'dropdown',
         ],
       },
@@ -215,7 +216,7 @@ Dark_Icon_Button.decorators = [
 
 export const Social_Icon_Button = () => {
   let facebook = BaseButtonTemplate({
-    label: 'Explore',
+    label: 'Facebook',
     variant: 'social',
     link: '#',
     caret: false,
@@ -226,7 +227,7 @@ export const Social_Icon_Button = () => {
     cssClass: '-facebook w-12 h-12 text-2xl mr-3',
   })
   let twitter = BaseButtonTemplate({
-    label: 'Explore',
+    label: 'X',
     variant: 'social',
     link: '#',
     caret: false,
@@ -237,7 +238,7 @@ export const Social_Icon_Button = () => {
     cssClass: '-twitter w-12 h-12 text-2xl mr-3',
   })
   let instagram = BaseButtonTemplate({
-    label: 'Explore',
+    label: 'Instagram',
     variant: 'social',
     link: '#',
     caret: false,
@@ -248,7 +249,7 @@ export const Social_Icon_Button = () => {
     cssClass: '-instagram w-12 h-12 text-2xl mr-3',
   })
   let youtube = BaseButtonTemplate({
-    label: 'Explore',
+    label: 'YouTube',
     variant: 'social',
     link: '#',
     caret: false,
@@ -258,8 +259,19 @@ export const Social_Icon_Button = () => {
     iconOnly: true,
     cssClass: '-youtube w-12 h-12 text-2xl mr-3',
   })
+  let reddit = BaseButtonTemplate({
+    label: 'Reddit',
+    variant: 'social',
+    link: '#',
+    caret: false,
+    compact: true,
+    disabled: false,
+    icon: 'reddit',
+    iconOnly: true,
+    cssClass: '-reddit w-12 h-12 text-2xl mr-3',
+  })
 
-  return `${facebook} ${twitter} ${instagram} ${youtube}`
+  return `${facebook} ${twitter} ${instagram} ${youtube} ${reddit}`
 }
 Social_Icon_Button.decorators = [
   (Story) => `<div class="p-5 flex items-center">${Story()}</div>`,

storybook/stories/components/Icons/IconSocialReddit.js

@@ -0,0 +1,19 @@
+export const IconSocialRedditTemplate = ({ customClass }) => {
+  if (!customClass) customClass = ''
+  return `
+    <svg
+      class="IconSocialReddit ${customClass}"
+      width="24"
+      height="22"
+      viewBox="0 0 24 22"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path
+        d="M24,11.187c0.001-1.449-1.172-2.625-2.622-2.626c-0.681-0.001-1.336,0.264-1.826,0.737 c-1.795-1.296-4.268-2.132-7.023-2.228l1.196-5.628l3.908,0.832c0.048,1.036,0.927,1.837,1.963,1.789s1.837-0.927,1.789-1.963 c-0.048-1.036-0.927-1.837-1.963-1.789c-0.683,0.032-1.295,0.432-1.597,1.045l-4.364-0.928c-0.253-0.054-0.502,0.108-0.556,0.361 l-1.336,6.28C8.775,7.146,6.263,7.984,4.444,9.294C3.399,8.289,1.738,8.322,0.733,9.366s-0.973,2.706,0.072,3.711 c0.218,0.21,0.472,0.381,0.748,0.504c-0.041,0.263-0.062,0.528-0.063,0.794c0,4.04,4.703,7.316,10.504,7.316 s10.504-3.275,10.504-7.316c0-0.264-0.021-0.528-0.062-0.789C23.387,13.167,24,12.226,24,11.187z M5.996,13.063 c0-1.036,0.84-1.876,1.875-1.876c1.036,0,1.876,0.84,1.876,1.875c0,1.036-0.839,1.876-1.875,1.876 C6.837,14.938,5.997,14.099,5.996,13.063z M16.455,18.02c-1.28,1.278-3.733,1.378-4.455,1.378s-3.175-0.099-4.453-1.378 c-0.19-0.19-0.19-0.498,0-0.687c0.19-0.19,0.498-0.19,0.687,0c0.807,0.807,2.533,1.093,3.767,1.093s2.959-0.286,3.767-1.094 c0.193-0.186,0.501-0.181,0.688,0.013C16.637,17.533,16.636,17.832,16.455,18.02L16.455,18.02z M16.125,14.939 c-1.036,0-1.876-0.84-1.876-1.876c0-1.036,0.84-1.876,1.876-1.876c1.036,0,1.876,0.84,1.876,1.876c0,0,0,0,0,0 C17.999,14.099,17.16,14.938,16.125,14.939z"
+        fill="currentColor"
+      />
+    </svg>
+  `
+}

storybook/stories/components/Icons/IconSocialTwitter.js

@@ -3,21 +3,17 @@ export const IconSocialTwitterTemplate = ({ customClass }) => {
   return `
     <svg
       class="IconSocialTwitter ${customClass}"
-      width="23"
-      height="19"
-      viewBox="0 0 23 19"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
       aria-hidden="true"
       focusable="false"
     >
-      <g fill="none" fill-rule="evenodd">
-        <path d="M0 0H24V24H0z" transform="translate(-1 -3)" />
-        <path
-          d="M8.233 21.5c8.68 0 13.427-6.926 13.427-12.932 0-.196 0-.392-.014-.587A9.413 9.413 0 0024 5.628a9.702 9.702 0 01-2.71.715 4.595 4.595 0 002.074-2.513 9.68 9.68 0 01-2.996 1.103c-1.463-1.498-3.787-1.865-5.67-.895-1.882.97-2.855 3.037-2.372 5.04-3.794-.183-7.33-1.91-9.725-4.749-1.253 2.077-.613 4.734 1.46 6.067a4.821 4.821 0 01-2.141-.568v.057c0 2.164 1.584 4.027 3.786 4.455a4.886 4.886 0 01-2.13.078c.617 1.852 2.389 3.12 4.408 3.157a9.702 9.702 0 01-5.86 1.949c-.376 0-.751-.023-1.124-.066a13.735 13.735 0 007.233 2.038"
-          fill="currentColor"
-          transform="translate(-1 -3)"
-        />
-      </g>
+      <path
+        d="M14.2,10.2L23,0h-2.1l-7.6,8.8L7.3,0h-7l9.2,13.3L0.3,24h2.1l8-9.3l6.4,9.3h7L14.2,10.2L14.2,10.2z M11.4,13.5 l-0.9-1.3L3.1,1.6h3.2l6,8.5l0.9,1.3l7.8,11.1h-3.2L11.4,13.5L11.4,13.5z"
+        fill="currentColor"
+      />
     </svg>
   `
 }

storybook/stories/components/Icons/Icons.stories.js

@@ -43,6 +43,7 @@ import { IconSocialFacebookTemplate } from './IconSocialFacebook'
 import { IconSocialInstagramTemplate } from './IconSocialInstagram'
 import { IconSocialTwitterTemplate } from './IconSocialTwitter'
 import { IconSocialYoutubeTemplate } from './IconSocialYoutube'
+import { IconSocialRedditTemplate } from './IconSocialReddit'
 import { IconTimeTemplate } from './IconTime'
 import { IconUserTemplate } from './IconUser'
 
@@ -160,12 +161,15 @@ SocialFacebook.args = { customClass: 'text-base text-facebook' }
 export const SocialInstagram = IconSocialInstagramTemplate.bind()
 SocialInstagram.args = { customClass: 'text-base text-instagram' }
 
-export const SocialTwitter = IconSocialTwitterTemplate.bind()
-SocialTwitter.args = { customClass: 'text-base text-twitter' }
+export const SocialReddit = IconSocialRedditTemplate.bind()
+SocialReddit.args = { customClass: 'text-base text-reddit' }
 
 export const SocialYoutube = IconSocialYoutubeTemplate.bind()
 SocialYoutube.args = { customClass: 'text-base text-youtube' }
 
+export const SocialX = IconSocialTwitterTemplate.bind()
+SocialX.args = { customClass: 'text-base text-twitter' }
+
 // Square Icons
 
 export const Prev = IconPrevTemplate.bind()

tailwind.config.js

@@ -45,9 +45,10 @@ const grayScale = {
 
 const socialColors = {
   facebook: '#3b5998',
-  twitter: '#00acee',
+  twitter: '#000000',
   instagram: '#dd2a7b',
-  youtube: '#FF0000',
+  youtube: '#ff0000',
+  reddit: '#ff4500',
 }
 
 // Font stack optimised for built-in fonts of each major operating system, with support for emojis.
@@ -187,6 +188,7 @@ module.exports = {
       'twitter-w50': socialColors.twitter + ' 50%',
       'instagram-w50': socialColors.instagram + ' 50%',
       'youtube-w50': socialColors.youtube + ' 50%',
+      'reddit-w50': socialColors.reddit + ' 50%',
       'transparent-black-90': 'rgba(0, 0, 0, 0.9)',
       'transparent-black-75': 'rgba(0, 0, 0, 0.75)',
       'transparent-black-50': 'rgba(0, 0, 0, 0.5)',