Update X in favor of Twitter

caponetto · May 4, 2024 · 7e44669 · 7e44669
1 parent 376f3e0
commit 7e44669
Show file tree

Hide file tree

Showing 9 changed files with 62 additions and 7 deletions.
diff --git a/src/components/button/XButton.tsx b/src/components/button/XButton.tsx
@@ -0,0 +1,13 @@
+import XIcon from "@mui/icons-material/X";
+import { useTranslation } from "react-i18next";
+import { SocialButton } from "./SocialButton";
+
+interface XButtonProps {
+  disableSpacing?: boolean;
+  url: string;
+}
+
+export function XButton(props: XButtonProps) {
+  const { t } = useTranslation();
+  return <SocialButton label={t("literal:x")} icon={<XIcon />} disableSpacing={props.disableSpacing} url={props.url} />;
+}
diff --git a/src/components/button/__tests__/XButton.test.tsx b/src/components/button/__tests__/XButton.test.tsx
@@ -0,0 +1,10 @@
+import { render } from "@testing-library/react";
+import { XButton } from "../XButton";
+import { usingTestingI18nContext } from "../../../jest/TestContextWrapper";
+
+describe("XButton", () => {
+  it("should match the snapshot", () => {
+    const { getByTestId } = render(usingTestingI18nContext(<XButton url="" />).wrapper);
+    expect(getByTestId("x-button")).toMatchSnapshot();
+  });
+});
diff --git a/src/components/button/__tests__/__snapshots__/XButton.test.tsx.snap b/src/components/button/__tests__/__snapshots__/XButton.test.tsx.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`XButton should match the snapshot 1`] = `
+<button
+  aria-label="Open x"
+  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1l55se7-MuiButtonBase-root-MuiIconButton-root"
+  data-mui-internal-clone-element="true"
+  data-testid="x-button"
+  id="x-button"
+  tabindex="0"
+  type="button"
+>
+  <svg
+    aria-hidden="true"
+    class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
+    data-testid="XIcon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+    />
+  </svg>
+  <span
+    class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+  />
+</button>
+`;
diff --git a/src/components/button/index.ts b/src/components/button/index.ts
@@ -2,3 +2,4 @@ export { ExternalLinkButton } from "./ExternalLinkButton";
 export { GitHubButton } from "./GitHubButton";
 export { LinkedInButton } from "./LinkedInButton";
 export { TwitterButton } from "./TwitterButton";
+export { XButton } from "./XButton";
diff --git a/src/components/social/SocialBar.tsx b/src/components/social/SocialBar.tsx
@@ -1,6 +1,6 @@
 import Grid from "@mui/material/Grid";
 import { SxProps, Theme } from "@mui/system";
-import { GitHubButton, LinkedInButton, TwitterButton } from "../button";
+import { GitHubButton, LinkedInButton, XButton } from "../button";
 
 interface SocialBarProps {
   sx?: SxProps<Theme>;
@@ -18,7 +18,7 @@ export function SocialBar(props: SocialBarProps) {
         <GitHubButton url={props.urls.github} />
       </Grid>
       <Grid item xs>
-        <TwitterButton url={props.urls.twitter} />
+        <XButton url={props.urls.twitter} />
       </Grid>
       <Grid item xs>
         <LinkedInButton url={props.urls.linkedin} />

diff --git a/src/pages/About/__tests__/__snapshots__/AboutPage.test.tsx.snap b/src/pages/About/__tests__/__snapshots__/AboutPage.test.tsx.snap
@@ -171,23 +171,23 @@ exports[`AboutPage should match the snapshot 1`] = `
                   target="_blank"
                 >
                   <button
-                    aria-label="Open twitter"
+                    aria-label="Open x"
                     class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-1l55se7-MuiButtonBase-root-MuiIconButton-root"
                     data-mui-internal-clone-element="true"
-                    data-testid="twitter-button"
-                    id="twitter-button"
+                    data-testid="x-button"
+                    id="x-button"
                     tabindex="0"
                     type="button"
                   >
                     <svg
                       aria-hidden="true"
                       class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
-                      data-testid="TwitterIcon"
+                      data-testid="XIcon"
                       focusable="false"
                       viewBox="0 0 24 24"
                     >
                       <path
-                        d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"
+                        d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
                       />
                     </svg>
                     <span

diff --git a/static/locales/en/literal.json b/static/locales/en/literal.json
@@ -136,5 +136,6 @@
   "vsCodeExtension": "VS Code Extension",
   "watch": "Watch",
   "webApp": "Web App",
+  "x": "X",
   "xmpp": "XMPP"
 }
diff --git a/static/locales/es/literal.json b/static/locales/es/literal.json
@@ -136,5 +136,6 @@
   "vsCodeExtension": "VS Code Extension",
   "watch": "Ver",
   "webApp": "Web App",
+  "x": "X",
   "xmpp": "XMPP"
 }
diff --git a/static/locales/pt/literal.json b/static/locales/pt/literal.json
@@ -136,5 +136,6 @@
   "vsCodeExtension": "VS Code Extension",
   "watch": "Assistir",
   "webApp": "Web App",
+  "x": "X",
   "xmpp": "XMPP"
 }