FEPLT-2124: add X icon and deprecate Twitter icon

docs/src/components/Github/TeamMember.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Stack } from "@kiwicom/orbit-components";
 import styled from "styled-components";
-import { Twitter, Link as LinkIcon } from "@kiwicom/orbit-components/icons";
+import { X, Link as LinkIcon } from "@kiwicom/orbit-components/icons";
 import { SiDribbble as Dribbble, SiGithub as Github } from "@icons-pack/react-simple-icons";
 
 import { Contributor } from ".";
@@ -35,7 +35,7 @@ interface Props extends Contributor {
 
 const TeamMember = ({ position, image, info, twitter, website, dribbble, github, name }: Props) => {
   const links = [
-    { url: twitter, icon: <Twitter /> },
+    { url: twitter, icon: <X /> },
     { url: website, icon: <LinkIcon /> },
     { url: dribbble, icon: <Dribbble /> },
     { url: github, icon: <Github /> },

docs/src/documentation/05-development/04-migration-guides/01-v17.mdx

@@ -12,6 +12,10 @@ With this guide, we aim to walk through all the breaking changes and how they ca
 
 ## Breaking changes
 
-### ColoredTwitter icon removed
+### ColoredTwitter and Twitter icons removed
 
-The `ColoredTwitter` icon was removed. The `Twitter` icon should be used instead.
+The `ColoredTwitter` and `Twitter` icons were removed. The `X` icon should be used instead.
+
+### SocialButton type
+
+The `type` prop in `SocialButton` no longer accepts `"twitter"` as a value. It now accepts `"X"` (capital letter) and renders the new icon correctly.

packages/orbit-components/src/SocialButton/README.md

@@ -47,7 +47,7 @@ Table below contains all types of the props available in SocialButton component.
 | `"apple"`    | `"small"`  | `"none"`     |
 | `"facebook"` | `"normal"` | `"smallest"` |
 | `"google"`   | `"large"`  | `"small"`    |
-| `"twitter"`  |            | `"normal"`   |
+| `"X"`        |            | `"normal"`   |
 | `"email"`    |            | `"medium"`   |
 |              |            | `"large"`    |
 |              |            | `"largest"`  |

packages/orbit-components/src/SocialButton/consts.ts

@@ -2,7 +2,7 @@ export enum TYPE_OPTIONS {
   APPLE = "apple",
   FACEBOOK = "facebook",
   GOOGLE = "google",
-  TWITTER = "twitter",
+  X = "X",
   EMAIL = "email",
 }
 

packages/orbit-components/src/SocialButton/helpers/getSocialButtonBoxShadow.ts

@@ -10,7 +10,7 @@ const opacity = {
   [TYPE_OPTIONS.APPLE]: 15,
   [TYPE_OPTIONS.FACEBOOK]: 8,
   [TYPE_OPTIONS.GOOGLE]: 8,
-  [TYPE_OPTIONS.TWITTER]: 8,
+  [TYPE_OPTIONS.X]: 8,
   [TYPE_OPTIONS.EMAIL]: 8,
 };
 

packages/orbit-components/src/SocialButton/helpers/getSocialButtonIcon.tsx

@@ -4,15 +4,15 @@ 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 X from "../../icons/X";
 import Email from "../../icons/Email";
 import type { Type } from "../types";
 
 const getSocialButtonIcon = (type: Type): React.ReactNode | null => {
   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 />;
+  if (type === TYPE_OPTIONS.X) return <X />;
   if (type === TYPE_OPTIONS.EMAIL) return <Email />;
 
   return null;

packages/orbit-components/src/SocialButton/helpers/getSocialButtonTypeToken.ts

@@ -10,63 +10,63 @@ const getSocialButtonTypeToken = (name: string, type: Type, theme: Theme): strin
       [TYPE_OPTIONS.APPLE]: theme.orbit.paletteInkDark,
       [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteCloudNormal,
       [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteCloudNormal,
-      [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteCloudNormal,
+      [TYPE_OPTIONS.X]: theme.orbit.paletteCloudNormal,
       [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteCloudNormal,
     },
     [TOKENS.backgroundButtonHover]: {
       [TYPE_OPTIONS.APPLE]: theme.orbit.paletteInkDarkHover,
       [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteCloudNormalHover,
       [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteCloudNormalHover,
-      [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteCloudNormalHover,
+      [TYPE_OPTIONS.X]: theme.orbit.paletteCloudNormalHover,
       [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteCloudNormalHover,
     },
     [TOKENS.backgroundButtonActive]: {
       [TYPE_OPTIONS.APPLE]: theme.orbit.paletteInkDarkActive,
       [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteCloudNormalActive,
       [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteCloudNormalActive,
-      [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteCloudNormalActive,
+      [TYPE_OPTIONS.X]: theme.orbit.paletteCloudNormalActive,
       [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteCloudNormalActive,
     },
     [TOKENS.backgroundButtonFocus]: {
       [TYPE_OPTIONS.APPLE]: theme.orbit.paletteInkDark,
       [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteCloudNormal,
       [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteCloudNormal,
-      [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteCloudNormal,
+      [TYPE_OPTIONS.X]: theme.orbit.paletteCloudNormal,
       [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteCloudNormal,
     },
     [TOKENS.colorTextButton]: {
       [TYPE_OPTIONS.APPLE]: theme.orbit.paletteWhite,
       [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteInkDark,
       [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteInkDark,
-      [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteInkDark,
+      [TYPE_OPTIONS.X]: theme.orbit.paletteInkDark,
       [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteInkDark,
     },
     [TOKENS.colorTextButtonHover]: {
       [TYPE_OPTIONS.APPLE]: theme.orbit.paletteWhite,
       [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteInkDark,
       [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteInkDark,
-      [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteInkDark,
+      [TYPE_OPTIONS.X]: theme.orbit.paletteInkDark,
       [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteInkDark,
     },
     [TOKENS.colorTextButtonActive]: {
       [TYPE_OPTIONS.APPLE]: theme.orbit.paletteWhite,
       [TYPE_OPTIONS.FACEBOOK]: theme.orbit.paletteInkDark,
       [TYPE_OPTIONS.GOOGLE]: theme.orbit.paletteInkDark,
-      [TYPE_OPTIONS.TWITTER]: theme.orbit.paletteInkDark,
+      [TYPE_OPTIONS.X]: theme.orbit.paletteInkDark,
       [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteInkDark,
     },
     [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
+      [TYPE_OPTIONS.X]: theme.orbit.paletteInkDark,
       [TYPE_OPTIONS.EMAIL]: theme.orbit.paletteInkDark,
     },
     [TOKENS.borderColorButtonFocus]: {
       [TYPE_OPTIONS.APPLE]: convertHexToRgba(theme.orbit.paletteInkNormal, 50),
       [TYPE_OPTIONS.FACEBOOK]: convertHexToRgba(theme.orbit.paletteInkNormal, 30),
       [TYPE_OPTIONS.GOOGLE]: convertHexToRgba(theme.orbit.paletteInkNormal, 50),
-      [TYPE_OPTIONS.TWITTER]: convertHexToRgba(theme.orbit.paletteInkNormal, 50),
+      [TYPE_OPTIONS.X]: convertHexToRgba(theme.orbit.paletteInkNormal, 50),
       [TYPE_OPTIONS.EMAIL]: convertHexToRgba(theme.orbit.paletteInkNormal, 50),
     },
   };

packages/orbit-components/src/SocialButton/types.d.ts

@@ -3,7 +3,7 @@
 
 import type { ButtonCommonProps, Size } from "../primitives/ButtonPrimitive/types";
 
-export type Type = "apple" | "facebook" | "google" | "twitter" | "email";
+export type Type = "apple" | "facebook" | "google" | "X" | "email";
 
 type OmittedButtonCommonProps = Omit<ButtonCommonProps, "iconLeft" | "iconRight" | "circled">;