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;