From 87a78a467ebc11e0302b2f189e47469353703555 Mon Sep 17 00:00:00 2001
From: Ariel Salem <Asalem1@users.noreply.github.com>
Date: Fri, 28 Feb 2020 05:34:48 -0800
Subject: [PATCH] feat(ui): added social button component (#17033)

feat(ui): added social button component
---
 .../clientLibraries/graphics/GithubLogo.tsx   | 18 ++++++++++
 .../clientLibraries/graphics/GoogleLogo.tsx   | 33 +++++++++++++++++++
 ui/src/clientLibraries/graphics/index.ts      | 19 +++++++++++
 ui/src/onboarding/containers/LoginPage.scss   |  8 ++---
 .../containers/LoginPageContents.tsx          | 20 ++++++-----
 ui/src/shared/components/SocialButton.tsx     | 26 +++++++++++++++
 6 files changed, 112 insertions(+), 12 deletions(-)
 create mode 100644 ui/src/clientLibraries/graphics/GithubLogo.tsx
 create mode 100644 ui/src/clientLibraries/graphics/GoogleLogo.tsx
 create mode 100644 ui/src/clientLibraries/graphics/index.ts
 create mode 100644 ui/src/shared/components/SocialButton.tsx

diff --git a/ui/src/clientLibraries/graphics/GithubLogo.tsx b/ui/src/clientLibraries/graphics/GithubLogo.tsx
new file mode 100644
index 00000000000..09d7850df3a
--- /dev/null
+++ b/ui/src/clientLibraries/graphics/GithubLogo.tsx
@@ -0,0 +1,18 @@
+// Libraries
+import React, {FC} from 'react'
+import classnames from 'classnames'
+
+interface Props {
+  className?: string
+}
+
+export const GithubLogo: FC<Props> = ({className}) => (
+  <svg
+    className={classnames('github-logo', className)}
+    role="img"
+    viewBox="0 0 24 24"
+  >
+    <title>GitHub icon</title>
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+  </svg>
+)
diff --git a/ui/src/clientLibraries/graphics/GoogleLogo.tsx b/ui/src/clientLibraries/graphics/GoogleLogo.tsx
new file mode 100644
index 00000000000..a142917baab
--- /dev/null
+++ b/ui/src/clientLibraries/graphics/GoogleLogo.tsx
@@ -0,0 +1,33 @@
+// Libraries
+import React, {FC} from 'react'
+import classnames from 'classnames'
+
+interface Props {
+  className?: string
+}
+
+export const GoogleLogo: FC<Props> = ({className}) => (
+  <svg
+    className={classnames('google-logo', className)}
+    x="0"
+    y="0"
+    viewBox="0 0 17.6 18"
+  >
+    <path
+      d="M15 15.8h-3v-2.3c1-.6 1.6-1.6 1.8-2.7H9V7.4h8.5c.1.6.2 1.2.2 1.8-.1 2.7-1 5.1-2.7 6.6z"
+      className="google-logo--blue"
+    />
+    <path
+      d="M9 18c-3.5 0-6.6-2-8-5v-2.3h3c.7 2.1 2.7 3.7 5 3.7 1.2 0 2.2-.3 3-.9l2.9 2.3C13.5 17.2 11.4 18 9 18z"
+      className="google-logo--green"
+    />
+    <path
+      d="M4 7.3c-.2.5-.3 1.1-.3 1.7 0 .6.1 1.2.3 1.7L1 13c-.6-1.2-1-2.6-1-4s.3-2.8 1-4h3v2.3z"
+      className="google-logo--yellow"
+    />
+    <path
+      d="M12.4 4.9C11.5 4 10.3 3.6 9 3.6c-2.3 0-4.3 1.6-5 3.7L1 5c1.4-3 4.5-5 8-5 2.4 0 4.5.9 6 2.3l-2.6 2.6z"
+      className="google-logo--red"
+    />
+  </svg>
+)
diff --git a/ui/src/clientLibraries/graphics/index.ts b/ui/src/clientLibraries/graphics/index.ts
new file mode 100644
index 00000000000..4573b909dc7
--- /dev/null
+++ b/ui/src/clientLibraries/graphics/index.ts
@@ -0,0 +1,19 @@
+import CSharpLogo from 'src/clientLibraries/graphics/CSharpLogo'
+import {GithubLogo} from 'src/clientLibraries/graphics/GithubLogo'
+import GoLogo from 'src/clientLibraries/graphics/GoLogo'
+import {GoogleLogo} from 'src/clientLibraries/graphics/GoogleLogo'
+import JavaLogo from 'src/clientLibraries/graphics/JavaLogo'
+import JSLogo from 'src/clientLibraries/graphics/JSLogo'
+import PythonLogo from 'src/clientLibraries/graphics/PythonLogo'
+import RubyLogo from 'src/clientLibraries/graphics/RubyLogo'
+
+export {
+  CSharpLogo,
+  GithubLogo,
+  GoLogo,
+  GoogleLogo,
+  JavaLogo,
+  JSLogo,
+  PythonLogo,
+  RubyLogo,
+}
diff --git a/ui/src/onboarding/containers/LoginPage.scss b/ui/src/onboarding/containers/LoginPage.scss
index 41fc62bd2a4..f6afa512523 100644
--- a/ui/src/onboarding/containers/LoginPage.scss
+++ b/ui/src/onboarding/containers/LoginPage.scss
@@ -148,19 +148,19 @@
   height: $icon-size-md;
   width: $icon-size-md;
 
-  .google-blue {
+  .google-logo--blue {
     fill: #3e82f1;
   }
 
-  .google-green {
+  .google-logo--green {
     fill: #32a753;
   }
 
-  .google-red {
+  .google-logo--red {
     fill: #e74133;
   }
 
-  .google-yellow {
+  .google-logo--yellow {
     fill: #f9bb00;
   }
 }
diff --git a/ui/src/onboarding/containers/LoginPageContents.tsx b/ui/src/onboarding/containers/LoginPageContents.tsx
index fb87e1a5f9b..57f0443ebd2 100644
--- a/ui/src/onboarding/containers/LoginPageContents.tsx
+++ b/ui/src/onboarding/containers/LoginPageContents.tsx
@@ -19,6 +19,8 @@ import auth0js from 'auth0-js'
 // Components
 import {LoginForm} from 'src/onboarding/components/LoginForm'
 import {SignUpForm} from 'src/onboarding/components/SignUpForm'
+import {SocialButton} from 'src/shared/components/SocialButton'
+import {GoogleLogo, GithubLogo} from 'src/clientLibraries/graphics'
 
 // Types
 import {Auth0Connection, FormFieldValidation} from 'src/types'
@@ -117,20 +119,22 @@ class LoginPageContents extends PureComponent<DispatchProps> {
                   alignItems={AlignItems.Center}
                   margin={ComponentSize.Large}
                 >
-                  <button
-                    onClick={() => {
+                  <SocialButton
+                    handleClick={() => {
                       this.handleSocialClick(Auth0Connection.Google)
                     }}
+                    buttonText="Google"
                   >
-                    Google
-                  </button>
-                  <button
-                    onClick={() => {
+                    <GoogleLogo className="signup-icon" />
+                  </SocialButton>
+                  <SocialButton
+                    buttonText="Github"
+                    handleClick={() => {
                       this.handleSocialClick(Auth0Connection.Github)
                     }}
                   >
-                    Github
-                  </button>
+                    <GithubLogo className="signup-icon" />
+                  </SocialButton>
                 </FlexBox>
               </Grid.Row>
             </Grid>
diff --git a/ui/src/shared/components/SocialButton.tsx b/ui/src/shared/components/SocialButton.tsx
new file mode 100644
index 00000000000..8ad61c7aa8a
--- /dev/null
+++ b/ui/src/shared/components/SocialButton.tsx
@@ -0,0 +1,26 @@
+// Libraries
+import React, {FC} from 'react'
+import {ButtonBase, ButtonShape, ComponentSize} from '@influxdata/clockface'
+
+interface Props {
+  buttonText: string
+  children: JSX.Element
+  handleClick?: () => void
+}
+
+export const SocialButton: FC<Props> = ({
+  buttonText,
+  children,
+  handleClick,
+}) => {
+  return (
+    <ButtonBase
+      onClick={handleClick}
+      size={ComponentSize.Large}
+      shape={ButtonShape.StretchToFit}
+    >
+      {children}
+      <span className="signup-text">{buttonText}</span>
+    </ButtonBase>
+  )
+}