feat(SocialButton): adding twitter type (#2057)

kiwicom · Jul 29, 2020 · cb1c97d · cb1c97d
1 parent 7b4eb44
commit cb1c97d
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 3 deletions.
diff --git a/src/SocialButton/README.md b/src/SocialButton/README.md
@@ -46,6 +46,7 @@ Table below contains all types of the props available in SocialButton component.
 | `"apple"`    | `"small"`  |
 | `"facebook"` | `"normal"` |
 | `"google"`   | `"large"`  |
+| `"twitter"`  |            |
 
 ## Functional specs
 

diff --git a/src/SocialButton/SocialButton.stories.js b/src/SocialButton/SocialButton.stories.js
@@ -35,6 +35,14 @@ storiesOf("SocialButton", module)
       </SocialButton>
     );
   })
+  .add("Twitter", () => {
+    const children = text("Children", "Sign in with Twitter");
+    return (
+      <SocialButton type={TYPE_OPTIONS.TWITTER} onClick={action("clicked")}>
+        {children}
+      </SocialButton>
+    );
+  })
   .add(
     "RTL",
     () => (

diff --git a/src/SocialButton/consts.js b/src/SocialButton/consts.js
@@ -3,6 +3,7 @@ export const TYPE_OPTIONS = {
   APPLE: "apple",
   FACEBOOK: "facebook",
   GOOGLE: "google",
+  TWITTER: "twitter",
 };
 
 export const TOKENS = {

diff --git a/src/SocialButton/helpers/getSocialButtonBoxShadow.js b/src/SocialButton/helpers/getSocialButtonBoxShadow.js
@@ -10,6 +10,7 @@ const opacity = {
   [TYPE_OPTIONS.APPLE]: 15,
   [TYPE_OPTIONS.FACEBOOK]: 8,
   [TYPE_OPTIONS.GOOGLE]: 8,
+  [TYPE_OPTIONS.TWITTER]: 8,
 };
 
 const getButtonBoxShadow: GetSocialButtonBoxShadow = (state, disabled, theme, type) => {

diff --git a/src/SocialButton/helpers/getSocialButtonIcon.js b/src/SocialButton/helpers/getSocialButtonIcon.js
@@ -5,12 +5,14 @@ import { TYPE_OPTIONS } from "../consts";
 import Apple from "../../icons/Apple";
 import Google from "../../icons/Google";
 import Facebook from "../../icons/Facebook";
+import Twitter from "../../icons/Twitter";
 import type { GetSocialButtonIcon } from "./getSocialButtonIcon";
 
 const getSocialButtonIcon: GetSocialButtonIcon = type => {
   if (type === TYPE_OPTIONS.APPLE) return <Apple />;
   if (type === TYPE_OPTIONS.FACEBOOK) return <Facebook />;
   if (type === TYPE_OPTIONS.GOOGLE) return <Google />;
+  if (type === TYPE_OPTIONS.TWITTER) return <Twitter />;
   return null;
 };
 

diff --git a/src/SocialButton/helpers/getSocialButtonTypeToken.js b/src/SocialButton/helpers/getSocialButtonTypeToken.js
@@ -10,46 +10,55 @@ const getSocialButtonTypeToken: GetSocialButtonTypeToken = (name, type, theme) =
       [TYPE_OPTIONS.APPLE]: theme.orbit.paletteInkNormal,
       [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteCloudDark,
       [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteCloudDark,
+      [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteCloudDark,
     },
     [TOKENS.backgroundButtonHover]: {
       [TYPE_OPTIONS.APPLE]: theme.orbit.paletteInkNormalHover,
       [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteCloudNormalHover,
       [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteCloudNormalHover,
+      [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteCloudNormalHover,
     },
     [TOKENS.backgroundButtonActive]: {
       [TYPE_OPTIONS.APPLE]: theme.orbit.paletteInkNormalActive,
       [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteCloudNormalActive,
       [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteCloudNormalActive,
+      [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteCloudNormalActive,
     },
     [TOKENS.backgroundButtonFocus]: {
       [TYPE_OPTIONS.APPLE]: theme.orbit.paletteInkNormal,
       [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteCloudDark,
       [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteCloudDark,
+      [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteCloudDark,
     },
     [TOKENS.colorTextButton]: {
       [TYPE_OPTIONS.APPLE]: theme.orbit.paletteWhite,
       [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteInkNormal,
       [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteInkNormal,
+      [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteInkNormal,
     },
     [TOKENS.colorTextButtonHover]: {
       [TYPE_OPTIONS.APPLE]: theme.orbit.paletteWhite,
       [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteInkNormal,
       [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteInkNormal,
+      [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteInkNormal,
     },
     [TOKENS.colorTextButtonActive]: {
       [TYPE_OPTIONS.APPLE]: theme.orbit.paletteWhite,
       [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteInkNormal,
       [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteInkNormal,
+      [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteInkNormal,
     },
     [TOKENS.iconColor]: {
       [TYPE_OPTIONS.APPLE]: theme.orbit.paletteWhite,
       [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteSocialFacebook,
       [TYPE_OPTIONS.GOOGLE]: "currentColor",
+      [TYPE_OPTIONS.TWITTER]: "#00ACEE", // TODO: add token
     },
     [TOKENS.borderColorButtonFocus]: {
       [TYPE_OPTIONS.APPLE]: convertHexToRgba(theme.orbit.paletteInkLight, 50),
       [TYPE_OPTIONS.FACEBOOK]: convertHexToRgba(theme.orbit.paletteInkLight, 30),
       [TYPE_OPTIONS.GOOGLE]: convertHexToRgba(theme.orbit.paletteInkLight, 50),
+      [TYPE_OPTIONS.TWITTER]: convertHexToRgba(theme.orbit.paletteInkLight, 50),
     },
   };
   return tokens[name][type];

diff --git a/src/SocialButton/index.d.ts b/src/SocialButton/index.d.ts
@@ -8,7 +8,7 @@ import { ButtonCommonProps } from "../primitives/ButtonPrimitive/index";
 
 declare module "@kiwicom/orbit-components/lib/Button";
 
-type Type = "apple" | "facebook" | "google";
+type Type = "apple" | "facebook" | "google" | "twitter";
 
 type OmittedButtonCommonProps = Exclude<
   ButtonCommonProps,

diff --git a/src/SocialButton/index.js.flow b/src/SocialButton/index.js.flow
@@ -6,11 +6,14 @@ import * as React from "react";
 
 import type { ButtonCommonProps } from "../primitives/ButtonPrimitive";
 
-export type Type = "apple" | "facebook" | "google";
+export type Type = "apple" | "facebook" | "google" | "twitter";
 
 export type Props = {|
   +type?: Type,
-  ...$Diff<ButtonCommonProps, { +iconLeft?: React.Node, +iconRight?: React.Node, +circled?: boolean }>,
+  ...$Diff<
+    ButtonCommonProps,
+    { +iconLeft?: React.Node, +iconRight?: React.Node, +circled?: boolean },
+  >,
 |};
 
 declare export default React.AbstractComponent<Props, HTMLButtonElement>;