diff --git a/src/SocialButton/README.md b/src/SocialButton/README.md
index cbd2c6d2dd..a9980445c6 100644
--- 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
index c13af6e03e..9e55a1d031 100644
--- a/src/SocialButton/SocialButton.stories.js
+++ b/src/SocialButton/SocialButton.stories.js
@@ -35,6 +35,14 @@ storiesOf("SocialButton", module)
);
})
+ .add("Twitter", () => {
+ const children = text("Children", "Sign in with Twitter");
+ return (
+
+ {children}
+
+ );
+ })
.add(
"RTL",
() => (
diff --git a/src/SocialButton/consts.js b/src/SocialButton/consts.js
index 1bc109788d..3f318c774b 100644
--- 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
index 2d61e5b7df..809be39938 100644
--- 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
index 3480230988..85b4ff1efa 100644
--- 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 ;
if (type === TYPE_OPTIONS.FACEBOOK) return ;
if (type === TYPE_OPTIONS.GOOGLE) return ;
+ if (type === TYPE_OPTIONS.TWITTER) return ;
return null;
};
diff --git a/src/SocialButton/helpers/getSocialButtonTypeToken.js b/src/SocialButton/helpers/getSocialButtonTypeToken.js
index b667bfd779..843ba345ff 100644
--- 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
index d196ef1cd6..137cffbbd9 100644
--- 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
index 4c3b2f96ca..b6686ece01 100644
--- 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,
+ ...$Diff<
+ ButtonCommonProps,
+ { +iconLeft?: React.Node, +iconRight?: React.Node, +circled?: boolean },
+ >,
|};
declare export default React.AbstractComponent;