feat(SocialButton): replace twitter type by X

BREAKING CHANGE: SocialButton's type prop no longer accepts "twitter". "X" type is now accepted.
kiwicom · Oct 3, 2024 · dbeca13 · dbeca13
1 parent 879cb0c
commit dbeca13
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 19 deletions.
diff --git a/docs/src/documentation/05-development/04-migration-guides/01-v17.mdx b/docs/src/documentation/05-development/04-migration-guides/01-v17.mdx
@@ -16,8 +16,6 @@ With this guide, we aim to walk through all the breaking changes and how they ca
 
 The `ColoredTwitter` and `Twitter` icons were removed. The `X` icon should be used instead.
 
-## Deprecations
+### SocialButton type
 
-### `Twitter` icon
-
-The `Twitter` icon was deprecated and will be removed in a future version. The `X` icon should be used instead.
+The `type` prop in `SocialButton` no longer accepts `"twitter"` as a value. It now accepts `"X"` (capital letter) and renders the new icon correctly.
diff --git a/packages/orbit-components/src/SocialButton/README.md b/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"`  |

diff --git a/packages/orbit-components/src/SocialButton/consts.ts b/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",
 }
 

diff --git a/packages/orbit-components/src/SocialButton/helpers/getSocialButtonBoxShadow.ts b/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,
 };
 

diff --git a/packages/orbit-components/src/SocialButton/helpers/getSocialButtonIcon.tsx b/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;

diff --git a/packages/orbit-components/src/SocialButton/helpers/getSocialButtonTypeToken.ts b/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),
     },
   };

diff --git a/packages/orbit-components/src/SocialButton/types.d.ts b/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">;