Skip to content

Commit f6d6be5

Browse files
raquelarrojoraquelarrojo
authored
Merge pull request #1680 from dxc-technology/gomezivann/update-twitter-branding
Updating to new X branding
2 parents 8df583a + 22725a3 commit f6d6be5

File tree

18 files changed

+146
-174
lines changed

18 files changed

+146
-174
lines changed

‎lib/src/footer/Footer.stories.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,17 @@ const social = [
2929
title: "Linkedin",
3030
},
3131
{
32-
href: "https://twitter.com/dxctechnology",
32+
href: "https://x.com/dxctechnology",
3333
logo: (
34-
<svg viewBox="0 0 248 204" fill="currentColor">
34+
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
35+
<rect width="256" height="256" rx="40" fill="white" />
3536
<path
36-
fill="#1d9bf0"
37-
d="M221.95 51.29c.15 2.17.15 4.34.15 6.53 0 66.73-50.8 143.69-143.69 143.69v-.04c-27.44.04-54.31-7.82-77.41-22.64 3.99.48 8 .72 12.02.73 22.74.02 44.83-7.61 62.72-21.66-21.61-.41-40.56-14.5-47.18-35.07 7.57 1.46 15.37 1.16 22.8-.87-23.56-4.76-40.51-25.46-40.51-49.5v-.64c7.02 3.91 14.88 6.08 22.92 6.32C11.58 63.31 4.74 33.79 18.14 10.71c25.64 31.55 63.47 50.73 104.08 52.76-4.07-17.54 1.49-35.92 14.61-48.25 20.34-19.12 52.33-18.14 71.45 2.19 11.31-2.23 22.15-6.38 32.07-12.26-3.77 11.69-11.66 21.62-22.2 27.93 10.01-1.18 19.79-3.86 29-7.95-6.78 10.16-15.32 19.01-25.2 26.16z"
37+
d="M140.192 118.205L187.848 64H176.556L135.158 111.056L102.117 64H64L113.975 135.163L64 192H75.2914L118.982 142.296L153.883 192H192L140.192 118.205ZM124.722 135.787L119.65 128.697L79.3634 72.3294H96.7094L129.232 117.837L134.282 124.927L176.551 184.076H159.205L124.722 135.787Z"
38+
fill="#0F1419"
3839
/>
3940
</svg>
4041
),
41-
title: "Twitter",
42+
title: "X",
4243
},
4344
{
4445
href: "https://www.facebook.com/DXCTechnology/",
@@ -75,8 +76,8 @@ const bottom = [
7576
text: "Linkedin",
7677
},
7778
{
78-
href: "https://twitter.com/dxctechnology",
79-
text: "Twitter",
79+
href: "https://x.com/dxctechnology",
80+
text: "X",
8081
},
8182
{
8283
href: "https://www.facebook.com/DXCTechnology/",

‎lib/src/layout/ApplicationLayout.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Title from "../../.storybook/components/Title";
44
import { INITIAL_VIEWPORTS } from "@storybook/addon-viewport";
55

66
export default {
7-
title: "Application Layout ",
7+
title: "Application Layout",
88
component: DxcApplicationLayout,
99
parameters: {
1010
viewport: {

‎lib/src/layout/ApplicationLayout.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import DxcFooter from "../footer/Footer";
44
import DxcSidenav from "../sidenav/Sidenav";
55
import styled from "styled-components";
66
import { responsiveSizes } from "../common/variables";
7-
import { facebookLogo, linkedinLogo, twitterLogo, hamburgerIcon } from "./Icons";
7+
import layoutIcons from "./Icons";
88
import AppLayoutPropsType, { AppLayoutMainPropsType } from "./types";
99
import { SidenavContextProvider, useResponsiveSidenavVisibility } from "./SidenavContext";
1010
import useTranslatedLabels from "../useTranslatedLabels";
@@ -22,8 +22,8 @@ const defaultFooter = () => (
2222
text: "Linkedin",
2323
},
2424
{
25-
href: "https://twitter.com/dxctechnology",
26-
text: "Twitter",
25+
href: "https://x.com/dxctechnology",
26+
text: "X",
2727
},
2828
{
2929
href: "https://www.facebook.com/DXCTechnology/",
@@ -33,17 +33,17 @@ const defaultFooter = () => (
3333
socialLinks={[
3434
{
3535
href: "https://www.linkedin.com/company/dxctechnology",
36-
logo: linkedinLogo,
36+
logo: layoutIcons.linkedinLogo,
3737
title: "Linkedin",
3838
},
3939
{
40-
href: "https://twitter.com/dxctechnology",
41-
logo: twitterLogo,
42-
title: "Twitter",
40+
href: "https://x.com/dxctechnology",
41+
logo: layoutIcons.xLogo,
42+
title: "X",
4343
},
4444
{
4545
href: "https://www.facebook.com/DXCTechnology/",
46-
logo: facebookLogo,
46+
logo: layoutIcons.facebookLogo,
4747
title: "Facebook",
4848
},
4949
]}
@@ -77,7 +77,7 @@ const DxcApplicationLayout = ({
7777
setIsSidenavVisibleResponsive((isSidenavVisibleResponsive) => !isSidenavVisibleResponsive);
7878
};
7979

80-
useLayoutEffect(() => {
80+
useEffect(() => {
8181
handleResize();
8282
window.addEventListener("resize", handleResize);
8383
return () => {
@@ -103,7 +103,7 @@ const DxcApplicationLayout = ({
103103
aria-label={visibilityToggleLabel ? undefined : translatedLabels.applicationLayout.visibilityToggleTitle}
104104
title={translatedLabels.applicationLayout.visibilityToggleTitle}
105105
>
106-
{hamburgerIcon}
106+
{layoutIcons.hamburgerIcon}
107107
{visibilityToggleLabel}
108108
</HamburgerTrigger>
109109
</VisibilityToggle>
@@ -175,6 +175,7 @@ const HamburgerTrigger = styled.button`
175175
font-size: 14px;
176176
color: #000;
177177
cursor: pointer;
178+
178179
:active {
179180
background-color: #cccccc;
180181
}

‎lib/src/layout/Icons.tsx‎

Lines changed: 64 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,71 @@
11
import React from "react";
22

3-
export const facebookLogo = (
4-
<svg
5-
version="1.1"
6-
id="Capa_1"
7-
x="0px"
8-
y="0px"
9-
width="438.536px"
10-
height="438.536px"
11-
viewBox="0 0 438.536 438.536"
12-
fill="#FFFFFF"
13-
>
14-
<g>
15-
<path
16-
d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
17-
C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
18-
h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
19-
C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
20-
c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
21-
c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
22-
/>
23-
</g>
24-
</svg>
25-
);
26-
27-
export const twitterLogo = (
28-
<svg
29-
version="1.1"
30-
id="Capa_1"
31-
x="0px"
32-
y="0px"
33-
width="438.536px"
34-
height="438.536px"
35-
viewBox="0 0 438.536 438.536"
36-
fill="#FFFFFF"
37-
>
38-
<g>
39-
<path
40-
d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
3+
const layoutIcons = {
4+
facebookLogo: (
5+
<svg
6+
version="1.1"
7+
id="Capa_1"
8+
x="0px"
9+
y="0px"
10+
width="438.536px"
11+
height="438.536px"
12+
viewBox="0 0 438.536 438.536"
13+
fill="#FFFFFF"
14+
>
15+
<g>
16+
<path
17+
d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
4118
C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
4219
h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
43-
C438.532,59.576,430.49,40.204,414.41,24.123z M335.471,168.735c0.191,1.713,0.288,4.278,0.288,7.71
44-
c0,15.989-2.334,32.025-6.995,48.104c-4.661,16.087-11.8,31.504-21.416,46.254c-9.606,14.749-21.074,27.791-34.396,39.115
45-
c-13.325,11.32-29.311,20.365-47.968,27.117c-18.648,6.762-38.637,10.143-59.953,10.143c-33.116,0-63.76-8.952-91.931-26.836
46-
c4.568,0.568,9.329,0.855,14.275,0.855c27.6,0,52.439-8.565,74.519-25.7c-12.941-0.185-24.506-4.179-34.688-11.991
47-
c-10.185-7.803-17.273-17.699-21.271-29.691c4.947,0.76,8.658,1.137,11.132,1.137c4.187,0,9.042-0.76,14.56-2.279
48-
c-13.894-2.669-25.598-9.562-35.115-20.697c-9.519-11.136-14.277-23.84-14.277-38.114v-0.571
49-
c10.085,4.755,19.602,7.229,28.549,7.422c-17.321-11.613-25.981-28.265-25.981-49.963c0-10.66,2.758-20.747,8.278-30.264
50-
c15.035,18.464,33.311,33.213,54.816,44.252c21.507,11.038,44.54,17.227,69.092,18.558c-0.95-3.616-1.427-8.186-1.427-13.704
51-
c0-16.562,5.853-30.692,17.56-42.399c11.703-11.706,25.837-17.561,42.394-17.561c17.515,0,32.079,6.283,43.688,18.846
52-
c13.134-2.474,25.892-7.33,38.26-14.56c-4.757,14.652-13.613,25.788-26.55,33.402c12.368-1.716,23.88-4.95,34.537-9.708
53-
C357.458,149.793,347.462,160.166,335.471,168.735z"
54-
/>
55-
</g>
56-
</svg>
57-
);
58-
59-
export const linkedinLogo = (
60-
<svg
61-
version="1.1"
62-
id="Capa_1"
63-
x="0px"
64-
y="0px"
65-
width="438.536px"
66-
height="438.536px"
67-
viewBox="0 0 438.536 438.536"
68-
fill="#FFFFFF"
69-
>
70-
<g>
20+
C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
21+
c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
22+
c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
23+
/>
24+
</g>
25+
</svg>
26+
),
27+
xLogo: (
28+
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
29+
<rect width="256" height="256" rx="40" fill="white" />
7130
<path
72-
d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
73-
C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
74-
h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
75-
C438.532,59.576,430.49,40.204,414.41,24.123z M133.618,367.157H67.666V169.016h65.952V367.157z M127.626,132.332
76-
c-6.851,6.567-15.893,9.851-27.124,9.851h-0.288c-10.848,0-19.648-3.284-26.407-9.851c-6.76-6.567-10.138-14.703-10.138-24.41
77-
c0-9.897,3.476-18.083,10.421-24.556c6.95-6.471,15.942-9.708,26.98-9.708c11.039,0,19.89,3.237,26.553,9.708
78-
c6.661,6.473,10.088,14.659,10.277,24.556C137.899,117.625,134.477,125.761,127.626,132.332z M370.873,367.157h-65.952v-105.92
79-
c0-29.879-11.036-44.823-33.116-44.823c-8.374,0-15.42,2.331-21.128,6.995c-5.715,4.661-9.996,10.324-12.847,16.991
80-
c-1.335,3.422-1.999,8.75-1.999,15.981v110.775h-65.952c0.571-119.529,0.571-185.579,0-198.142h65.952v27.974
81-
c13.867-21.681,33.558-32.544,59.101-32.544c22.84,0,41.21,7.52,55.104,22.554c13.895,15.037,20.841,37.214,20.841,66.519v113.64
82-
H370.873z"
31+
d="M140.192 118.205L187.848 64H176.556L135.158 111.056L102.117 64H64L113.975 135.163L64 192H75.2914L118.982 142.296L153.883 192H192L140.192 118.205ZM124.722 135.787L119.65 128.697L79.3634 72.3294H96.7094L129.232 117.837L134.282 124.927L176.551 184.076H159.205L124.722 135.787Z"
32+
fill="#0F1419"
8333
/>
84-
</g>
85-
</svg>
86-
);
34+
</svg>
35+
),
36+
linkedinLogo: (
37+
<svg
38+
version="1.1"
39+
id="Capa_1"
40+
x="0px"
41+
y="0px"
42+
width="438.536px"
43+
height="438.536px"
44+
viewBox="0 0 438.536 438.536"
45+
fill="#FFFFFF"
46+
>
47+
<g>
48+
<path
49+
d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
50+
C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
51+
h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
52+
C438.532,59.576,430.49,40.204,414.41,24.123z M133.618,367.157H67.666V169.016h65.952V367.157z M127.626,132.332
53+
c-6.851,6.567-15.893,9.851-27.124,9.851h-0.288c-10.848,0-19.648-3.284-26.407-9.851c-6.76-6.567-10.138-14.703-10.138-24.41
54+
c0-9.897,3.476-18.083,10.421-24.556c6.95-6.471,15.942-9.708,26.98-9.708c11.039,0,19.89,3.237,26.553,9.708
55+
c6.661,6.473,10.088,14.659,10.277,24.556C137.899,117.625,134.477,125.761,127.626,132.332z M370.873,367.157h-65.952v-105.92
56+
c0-29.879-11.036-44.823-33.116-44.823c-8.374,0-15.42,2.331-21.128,6.995c-5.715,4.661-9.996,10.324-12.847,16.991
57+
c-1.335,3.422-1.999,8.75-1.999,15.981v110.775h-65.952c0.571-119.529,0.571-185.579,0-198.142h65.952v27.974
58+
c13.867-21.681,33.558-32.544,59.101-32.544c22.84,0,41.21,7.52,55.104,22.554c13.895,15.037,20.841,37.214,20.841,66.519v113.64
59+
H370.873z"
60+
/>
61+
</g>
62+
</svg>
63+
),
64+
hamburgerIcon: (
65+
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
66+
<path d="M3 18V16H21V18ZM3 13V11H21V13ZM3 8V6H21V8Z" />
67+
</svg>
68+
),
69+
};
8770

88-
export const hamburgerIcon = (
89-
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" viewBox="0 0 24 24">
90-
<path d="M3 18V16H21V18ZM3 13V11H21V13ZM3 8V6H21V8Z" />
91-
</svg>
92-
);
71+
export default layoutIcons;

‎lib/src/select/Select.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -188,9 +188,9 @@ const url_options = [
188188
icon: "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/800px-Instagram_logo_2016.svg.png",
189189
},
190190
{
191-
label: "Twitter",
192-
value: "twitter",
193-
icon: "https://cdn.computerhoy.com/sites/navi.axelspringer.es/public/styles/480/public/media/image/2013/08/17981-logo-twitter.png?itok=dElA6iAV",
191+
label: "X",
192+
value: "x",
193+
icon: "https://static.dezeen.com/uploads/2023/07/x-logo-twitter-elon-musk_dezeen_2364_col_0.jpg",
194194
},
195195
{
196196
label: "Facebook",

‎lib/src/select/Select.test.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -97,9 +97,9 @@ const urlIconOptions = [
9797
icon: "https://cdn.icon-icons.com/icons2/2518/PNG/512/brand_instagram_icon_151534.png",
9898
},
9999
{
100-
label: "Twitter",
100+
label: "X",
101101
value: "2",
102-
icon: "https://cdn-icons-png.flaticon.com/512/81/81609.png",
102+
icon: "https://static.dezeen.com/uploads/2023/07/x-logo-twitter-elon-musk_dezeen_2364_col_0.jpg",
103103
},
104104
{
105105
label: "Snapchat",
@@ -161,9 +161,9 @@ const groupedIconOptions = [
161161
icon: "https://cdn.icon-icons.com/icons2/2518/PNG/512/brand_instagram_icon_151534.png",
162162
},
163163
{
164-
label: "Twitter",
164+
label: "X",
165165
value: "2",
166-
icon: "https://cdn-icons-png.flaticon.com/512/81/81609.png",
166+
icon: "https://static.dezeen.com/uploads/2023/07/x-logo-twitter-elon-musk_dezeen_2364_col_0.jpg",
167167
},
168168
{
169169
label: "Facebook",

‎lib/src/toggle-group/ToggleGroup.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ const options = [
4242
},
4343
{
4444
value: 2,
45-
label: "Twitter",
45+
label: "X",
4646
},
4747
{
4848
value: 3,
@@ -90,7 +90,7 @@ const twoOptions = [
9090
},
9191
{
9292
value: 2,
93-
label: "Twitter",
93+
label: "X",
9494
},
9595
];
9696

@@ -212,7 +212,7 @@ ToggleGroupSelectedActived.play = async ({ canvasElement }) => {
212212
export const ToggleGroupUnselectedActived = OptionSelected.bind({});
213213
ToggleGroupUnselectedActived.play = async ({ canvasElement }) => {
214214
const canvas = within(canvasElement);
215-
const option = canvas.getByText("Twitter");
215+
const option = canvas.getByText("X");
216216
await userEvent.click(option);
217217
userEvent.tab();
218218
};

‎website/screens/components/footer/specs/images/footer_anatomy.png‎

-2.74 KB
Loading

‎website/screens/components/footer/specs/images/footer_specs.png‎

-3.99 KB
Loading

‎website/screens/components/select/code/examples/icons.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,9 @@ const code = `() => {
1111
icon: "https://cdn.pixabay.com/photo/2021/06/15/12/17/instagram-6338401_960_720.png",
1212
},
1313
{
14-
label: "Twitter",
15-
value: "twitter",
16-
icon: "https://www.iconpacks.net/icons/2/free-twitter-logo-icon-2429-thumb.png",
14+
label: "X",
15+
value: "x",
16+
icon: "https://static.dezeen.com/uploads/2023/07/x-logo-twitter-elon-musk_dezeen_2364_col_0.jpg",
1717
},
1818
{
1919
label: "Facebook",

0 commit comments

Comments
 (0)