feat: 💥 migration twitter-x DSFR v1.11.0

vincentlaine · vincentlaine · commit 15a6584dc547 · 2023-12-20T18:14:02.000+01:00
diff --git a/src/components/DsfrFollow/DsfrFollow.e2e.ts b/src/components/DsfrFollow/DsfrFollow.e2e.ts
@@ -6,23 +6,28 @@ describe('DsfrFollow', () => {
   it('should mount DsfrFollow', () => {
     const networks = [
       {
-        name: 'facebook',
+        name: 'Facebook',
+        type: 'facebook',
         href: 'https://www.facebook.com',
       },
       {
-        name: 'twitter',
+        name: 'X (anciennement Twitter)',
+        type: 'twitter-x',
         href: 'https://www.twitter.com',
       },
       {
-        name: 'youtube',
+        name: 'Youtube',
+        type: 'youtube',
         href: 'https://www.youtube.com',
       },
       {
-        name: 'linkedin',
+        name: 'Linkedin',
+        type: 'linkedin',
         href: 'https://www.linkedin.com',
       },
       {
-        name: 'instagram',
+        name: 'Instagram',
+        type: 'instagram',
         href: 'https://www.instagram.com',
       },
     ]
diff --git a/src/components/DsfrFollow/DsfrFollow.stories.ts b/src/components/DsfrFollow/DsfrFollow.stories.ts
@@ -11,7 +11,7 @@ export default {
   argTypes: {
     networks: {
       control: 'object',
-      description: 'Liste des différents réseaux sociaux ; doit avoir 2 props : `name` (forcément parmi les valeurs suivantes : `\'facebook\'`, `\'twitter\'`, `\'youtube\'`, `\'linkedin\'`, `\'instagram\'`)  et `url`',
+      description: 'Liste des différents réseaux sociaux ; doit avoir 3 props : `name`, `type` (forcément parmi les valeurs suivantes : `\'facebook\'`, `\'twitter-x\'`, `\'youtube\'`, `\'linkedin\'`, `\'instagram\'`)  et `href`',
     },
     newsletterData: {
       control: 'object',
@@ -38,23 +38,28 @@ export const Suivre = (args) => ({
 Suivre.args = {
   networks: [
     {
-      name: 'facebook',
+      name: 'Facebook',
+      type: 'facebook',
       href: 'https://www.facebook.com',
     },
     {
-      name: 'twitter',
-      href: 'https://www.twitter.com',
+      name: 'X (anciennement Twitter)',
+      type: 'twitter-x',
+      href: 'https://www.x.com',
     },
     {
-      name: 'youtube',
+      name: 'Youtube',
+      type: 'youtube',
       href: 'https://www.youtube.com',
     },
     {
-      name: 'linkedin',
+      name: 'Linkedin',
+      type: 'linkedin',
       href: 'https://www.linkedin.com',
     },
     {
-      name: 'instagram',
+      name: 'Instagram',
+      type: 'instagram',
       href: 'https://www.instagram.com',
     },
   ],
@@ -90,23 +95,28 @@ export const SuivreMiseEnAvant = (args) => ({
 SuivreMiseEnAvant.args = {
   networks: [
     {
-      name: 'facebook',
+      name: 'Facebook',
+      type: 'facebook',
       href: 'https://www.facebook.com',
     },
     {
-      name: 'twitter',
-      href: 'https://www.twitter.com',
+      name: 'X (anciennement Twitter)',
+      type: 'twitter-x',
+      href: 'https://www.x.com',
     },
     {
-      name: 'youtube',
+      name: 'Youtube',
+      type: 'youtube',
       href: 'https://www.youtube.com',
     },
     {
-      name: 'linkedin',
+      name: 'Linkedin',
+      type: 'linkedin',
       href: 'https://www.linkedin.com',
     },
     {
-      name: 'instagram',
+      name: 'Instagram',
+      type: 'instagram',
       href: 'https://www.instagram.com',
     },
   ],
diff --git a/src/components/DsfrFollow/DsfrFollow.types.ts b/src/components/DsfrFollow/DsfrFollow.types.ts
@@ -1,6 +1,7 @@
-export type DsfrSocialNetworkName = 'facebook' | 'twitter' | 'instagram' | 'linkedin' | 'youtube'
+export type DsfrSocialNetworkName = 'facebook' | 'twitter-x' | 'instagram' | 'linkedin' | 'youtube'
 export type DsfrSocialNetwork = {
-  name: DsfrSocialNetworkName,
+  type: DsfrSocialNetworkName,
+  name: string,
   href: string
 }
 
diff --git a/src/components/DsfrFollow/DsfrSocialNetworks.spec.ts b/src/components/DsfrFollow/DsfrSocialNetworks.spec.ts
@@ -8,11 +8,13 @@ describe('DsfrSocialNetworks', () => {
     // Given
     const networks = [
       {
-        name: 'facebook',
+        name: 'Facebook',
+        type: 'facebook',
         href: 'https://www.facebook.com',
       },
       {
-        name: 'twitter',
+        name: 'X (anciennement Twitter)',
+        type: 'twitter-x',
         href: 'https://www.twitter.com',
       },
     ]
@@ -30,7 +32,7 @@ describe('DsfrSocialNetworks', () => {
     })
     const liElts = container.querySelectorAll('.fr-btn')
     const facebookIcon = container.querySelector('.fr-btn--facebook')
-    const twitterIcon = container.querySelector('.fr-btn--twitter')
+    const twitterIcon = container.querySelector('.fr-btn--twitter-x')
 
     // Then
     expect(liElts).toHaveLength(2)
diff --git a/src/components/DsfrFollow/DsfrSocialNetworks.stories.ts b/src/components/DsfrFollow/DsfrSocialNetworks.stories.ts
@@ -11,7 +11,7 @@ export default {
   argTypes: {
     networks: {
       control: 'object',
-      description: 'Liste des différents réseaux sociaux ; doit avoir 2 props : `name` (forcément parmi les valeurs suivantes : `\'facebook\'`, `\'twitter\'`, `\'youtube\'`, `\'linkedin\'`, `\'instagram\'`)  et `url`',
+      description: 'Liste des différents réseaux sociaux ; doit avoir 3 props : `name`, `type` (forcément parmi les valeurs suivantes : `\'facebook\'`, `\'twitter-x\'`, `\'youtube\'`, `\'linkedin\'`, `\'instagram\'`)  et `url`',
     },
     titleTag: {
       control: 'text',
@@ -43,23 +43,28 @@ ReseauxSociaux.args = {
   titleTag: undefined,
   networks: [
     {
-      name: 'facebook',
+      name: 'Facebook',
+      type: 'facebook',
       href: 'https://www.facebook.com',
     },
     {
-      name: 'twitter',
-      href: 'https://www.twitter.com',
+      name: 'X (anciennement Twitter)',
+      type: 'twitter-x',
+      href: 'https://www.x.com',
     },
     {
-      name: 'youtube',
+      name: 'Youtube',
+      type: 'youtube',
       href: 'https://www.youtube.com',
     },
     {
-      name: 'linkedin',
+      name: 'Linkedin',
+      type: 'linkedin',
       href: 'https://www.linkedin.com',
     },
     {
-      name: 'instagram',
+      name: 'Instagram',
+      type: 'instagram',
       href: 'https://www.instagram.com',
     },
   ],
diff --git a/src/components/DsfrFollow/DsfrSocialNetworks.vue b/src/components/DsfrFollow/DsfrSocialNetworks.vue
@@ -28,7 +28,7 @@ withDefaults(defineProps<DsfrSocialNetworksProps>(), {
       >
         <a
           class="fr-btn"
-          :class="`fr-btn--${network.name}`"
+          :class="`fr-btn--${network.type}`"
           :title="network.name"
           :href="network.href"
           target="_blank"
diff --git a/src/components/DsfrShare/DsfrShare.spec.ts b/src/components/DsfrShare/DsfrShare.spec.ts
@@ -17,8 +17,8 @@ describe('DsfrShare', () => {
         url: 'https://www.facebook.com/sharer.php?u=[À MODIFIER - url de la page]',
       },
       {
-        name: 'twitter',
-        label: 'Partager sur Twitter',
+        name: 'twitter-x',
+        label: 'Partager sur X (anciennement Twitter)',
         url: 'https://twitter.com/intent/tweet?url=[À MODIFIER - url de la page]&text=[À MODIFIER - titre ou texte descriptif de la page]&via=[À MODIFIER - via]&hashtags=[À MODIFIER - hashtags]',
       },
       {
diff --git a/src/components/DsfrShare/DsfrShare.stories.ts b/src/components/DsfrShare/DsfrShare.stories.ts
@@ -59,8 +59,8 @@ Partage.args = {
       url: 'https://www.facebook.com/sharer.php?u=[À MODIFIER - url de la page]',
     },
     {
-      name: 'twitter',
-      label: 'Partager sur Twitter',
+      name: 'twitter-x',
+      label: 'Partager sur X (anciennement Twitter)',
       url: 'https://twitter.com/intent/tweet?url=[À MODIFIER - url de la page]&text=[À MODIFIER - titre ou texte descriptif de la page]&via=[À MODIFIER - via]&hashtags=[À MODIFIER - hashtags]',
     },
     {

Original file line number	Diff line number	Diff line change
`@@ -6,23 +6,28 @@ describe('DsfrFollow', () => {`
`6`	`6`	`it('should mount DsfrFollow', () => {`
`7`	`7`	`const networks = [`
`8`	`8`	`{`
`9`		`- name: 'facebook',`
	`9`	`+ name: 'Facebook',`
	`10`	`+ type: 'facebook',`
`10`	`11`	`href: 'https://www.facebook.com',`
`11`	`12`	`},`
`12`	`13`	`{`
`13`		`- name: 'twitter',`
	`14`	`+ name: 'X (anciennement Twitter)',`
	`15`	`+ type: 'twitter-x',`
`14`	`16`	`href: 'https://www.twitter.com',`
`15`	`17`	`},`
`16`	`18`	`{`
`17`		`- name: 'youtube',`
	`19`	`+ name: 'Youtube',`
	`20`	`+ type: 'youtube',`
`18`	`21`	`href: 'https://www.youtube.com',`
`19`	`22`	`},`
`20`	`23`	`{`
`21`		`- name: 'linkedin',`
	`24`	`+ name: 'Linkedin',`
	`25`	`+ type: 'linkedin',`
`22`	`26`	`href: 'https://www.linkedin.com',`
`23`	`27`	`},`
`24`	`28`	`{`
`25`		`- name: 'instagram',`
	`29`	`+ name: 'Instagram',`
	`30`	`+ type: 'instagram',`
`26`	`31`	`href: 'https://www.instagram.com',`
`27`	`32`	`},`
`28`	`33`	`]`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`		`-export type DsfrSocialNetworkName = 'facebook' \| 'twitter' \| 'instagram' \| 'linkedin' \| 'youtube'`
	`1`	`+export type DsfrSocialNetworkName = 'facebook' \| 'twitter-x' \| 'instagram' \| 'linkedin' \| 'youtube'`
`2`	`2`	`export type DsfrSocialNetwork = {`
`3`		`- name: DsfrSocialNetworkName,`
	`3`	`+ type: DsfrSocialNetworkName,`
	`4`	`+ name: string,`
`4`	`5`	`href: string`
`5`	`6`	`}`
`6`	`7`
Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ withDefaults(defineProps<DsfrSocialNetworksProps>(), {`
`28`	`28`	`>`
`29`	`29`	`<a`
`30`	`30`	`class="fr-btn"`
`31`		- :class="`fr-btn--${network.name}`"
	`31`	+ :class="`fr-btn--${network.type}`"
`32`	`32`	`:title="network.name"`
`33`	`33`	`:href="network.href"`
`34`	`34`	`target="_blank"`
Original file line number	Diff line number	Diff line change
`@@ -17,8 +17,8 @@ describe('DsfrShare', () => {`
`17`	`17`	`url: 'https://www.facebook.com/sharer.php?u=[À MODIFIER - url de la page]',`
`18`	`18`	`},`
`19`	`19`	`{`
`20`		`- name: 'twitter',`
`21`		`- label: 'Partager sur Twitter',`
	`20`	`+ name: 'twitter-x',`
	`21`	`+ label: 'Partager sur X (anciennement Twitter)',`
`22`	`22`	`url: 'https://twitter.com/intent/tweet?url=[À MODIFIER - url de la page]&text=[À MODIFIER - titre ou texte descriptif de la page]&via=[À MODIFIER - via]&hashtags=[À MODIFIER - hashtags]',`
`23`	`23`	`},`
`24`	`24`	`{`
Original file line number	Diff line number	Diff line change
`@@ -59,8 +59,8 @@ Partage.args = {`
`59`	`59`	`url: 'https://www.facebook.com/sharer.php?u=[À MODIFIER - url de la page]',`
`60`	`60`	`},`
`61`	`61`	`{`
`62`		`- name: 'twitter',`
`63`		`- label: 'Partager sur Twitter',`
	`62`	`+ name: 'twitter-x',`
	`63`	`+ label: 'Partager sur X (anciennement Twitter)',`
`64`	`64`	`url: 'https://twitter.com/intent/tweet?url=[À MODIFIER - url de la page]&text=[À MODIFIER - titre ou texte descriptif de la page]&via=[À MODIFIER - via]&hashtags=[À MODIFIER - hashtags]',`
`65`	`65`	`},`
`66`	`66`	`{`