Remove DisplaySettingDialog to Display for consitency with official website

Author: garronej

package.json

@@ -74,7 +74,7 @@
         "@emotion/react": "^11.10.4",
         "tss-react": "^4.4.4",
         "@emotion/styled": "^11.10.4",
-        "@gouvfr/dsfr": "1.8.5",
+        "@gouvfr/dsfr": "1.8.4",
         "@mui/material": "^5.10.7",
         "@storybook/addon-actions": "^6.5.13",
         "@storybook/addon-essentials": "^6.5.13",
@@ -127,7 +127,7 @@
         "./Notice": "./dist/Notice.js",
         "./Highlight": "./dist/Highlight.js",
         "./Header": "./dist/Header/index.js",
-        "./DisplaySettingsDialog": "./dist/DisplaySettingsDialog.js",
+        "./Display": "./dist/Display.js",
         "./Badge": "./dist/Badge.js",
         "./Alert": "./dist/Alert.js",
         "./Accordion": "./dist/Accordion.js"

src/DisplaySettingsDialog.tsx renamed to src/Display.tsx

@@ -11,14 +11,14 @@ import ArtworkSystemSvg from "./dsfr/artwork/system.svg";
 import { getAssetUrl } from "./lib/tools/getAssetUrl";
 import type { HeaderProps } from "./Header";
 
-export type DisplaySettingsDialog = {
+export type Display = {
     className?: string;
 };
 
 const dialogId = "fr-theme-modal";
 const dialogTitleId = "fr-theme-modal-title";
 
-export const headerQuickAccessDisplaySettingsItem: HeaderProps.QuickAccessItem.Button = {
+export const headerQuickAccessDisplay: HeaderProps.QuickAccessItem.Button = {
     "buttonProps": {
         "aria-controls": dialogId,
         ...({ "data-fr-opened": false } as {})
@@ -34,9 +34,9 @@ export const headerQuickAccessDisplaySettingsItem: HeaderProps.QuickAccessItem.B
     })()
 };
 
-/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-darkmodeswitch> */
-export const DisplaySettingsDialog = memo(
-    forwardRef<HTMLDialogElement, DisplaySettingsDialog>((props, ref) => {
+/** @see <https://react-dsfr-components.etalab.studio/?path=/docs/components-display> */
+export const Display = memo(
+    forwardRef<HTMLDialogElement, Display>((props, ref) => {
         const { className, ...rest } = props;
 
         assert<Equals<keyof typeof rest, never>>();
@@ -101,9 +101,9 @@ export const DisplaySettingsDialog = memo(
     })
 );
 
-DisplaySettingsDialog.displayName = symToStr({ DisplaySettingsDialog });
+Display.displayName = symToStr({ Display });
 
-export default DisplaySettingsDialog;
+export default Display;
 
 const RadioGroup = memo((props: { theme: "dark" | "light" | "system" }) => {
     const { theme } = props;
@@ -159,8 +159,8 @@ const RadioGroup = memo((props: { theme: "dark" | "light" | "system" }) => {
 
 RadioGroup.displayName = symToStr({ RadioGroup });
 
-const { useTranslation, addDisplaySettingsDialogTranslations } = createComponentI18nApi({
-    "componentName": symToStr({ DisplaySettingsDialog }),
+const { useTranslation, addDisplayTranslations } = createComponentI18nApi({
+    "componentName": symToStr({ Display }),
     "frMessages": {
         /* spell-checker: disable */
         "display settings": "Paramètres d'affichage",
@@ -174,7 +174,7 @@ const { useTranslation, addDisplaySettingsDialogTranslations } = createComponent
     }
 });
 
-addDisplaySettingsDialogTranslations({
+addDisplayTranslations({
     "lang": "en",
     "messages": {
         "display settings": "Display settings",
@@ -187,7 +187,7 @@ addDisplaySettingsDialogTranslations({
     }
 });
 
-addDisplaySettingsDialogTranslations({
+addDisplayTranslations({
     "lang": "es",
     "messages": {
         /* spell-checker: disable */
@@ -198,4 +198,4 @@ addDisplaySettingsDialogTranslations({
     }
 });
 
-export { addDisplaySettingsDialogTranslations };
+export { addDisplayTranslations };

stories/DisplaySettingsDialog.stories.tsx renamed to stories/Display.stories.tsx

@@ -1,21 +1,18 @@
 import * as React from "react";
 import { Header } from "../dist/Header";
-import {
-    DisplaySettingsDialog,
-    headerQuickAccessDisplaySettingsItem
-} from "../dist/DisplaySettingsDialog";
+import { Display, headerQuickAccessDisplay } from "../dist/Display";
 import { sectionName } from "./sectionName";
 import { getStoryFactory } from "./getStory";
 import { symToStr } from "tsafe/symToStr";
 
 const { meta, getStory } = getStoryFactory({
     sectionName,
-    "wrappedComponent": { [symToStr({ DisplaySettingsDialog })]: Story },
+    "wrappedComponent": { [symToStr({ Display })]: Story },
     "description": `
 A button that opens a dialog to enable the user to select light or dark mode.  
 
 - [See DSFR documentation](https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/parametres-d-affichage),
-- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/DisplaySettingsDialog.tsx)
+- [See source code](https://github.com/codegouvfr/react-dsfr/blob/main/src/Display.tsx)
 
 Optionally, you can also use \`import { useIsDark } from "@codegouvfr/react-dsfr"\` to manually monitor and controls 
 the theme state.
@@ -24,7 +21,7 @@ the theme state.
 
 \`\`\`tsx
 import { Header } from "../dist/Header";
-import { DisplaySettingsDialog, headerQuickAccessDisplaySettingsItem } from "../dist/DisplaySettingsDialog";
+import { Display, headerQuickAccessDisplay } from "../dist/Display";
 
 function App(){
 
@@ -34,11 +31,11 @@ function App(){
                 // other header props...
                 quickAccessItems={[
                     // other quick access items...
-                    headerQuickAccessDisplaySettingsItem
+                    headerQuickAccessDisplay
                 ]}
             >
             {/* ... your app ...*/}
-            <DisplaySettingsDialog />
+            <Display />
         <>
     );
 
@@ -63,9 +60,9 @@ function Story() {
                 }
                 serviceTitle="Nom du site / service"
                 homeLinkProps={{ "href": "#" }}
-                quickAccessItems={[headerQuickAccessDisplaySettingsItem]}
+                quickAccessItems={[headerQuickAccessDisplay]}
             />
-            <DisplaySettingsDialog />
+            <Display />
         </>
     );
 }

test/integration/next/pages/_app.tsx

@@ -1,7 +1,7 @@
 import type { AppProps } from "next/app";
 import { useRouter } from "next/router";
 import { createNextDsfrIntegrationApi } from "@codegouvfr/react-dsfr/next";
-import { DisplaySettingsDialog, headerQuickAccessDisplaySettingsItem } from "@codegouvfr/react-dsfr/DisplaySettingsDialog";
+import { Display, headerQuickAccessDisplay } from "@codegouvfr/react-dsfr/Display";
 import { Header } from "@codegouvfr/react-dsfr/Header";
 import { createEmotionSsrAdvancedApproach } from "tss-react/next";
 import { useStyles } from "tss-react/dsfr";
@@ -67,7 +67,7 @@ function App({ Component, pageProps }: AppProps) {
                         "isActive": router.asPath === "/mui"
                     }
                 ]}
-                quickAccessItems={[headerQuickAccessDisplaySettingsItem]}
+                quickAccessItems={[headerQuickAccessDisplay]}
             />
             <div className={css({
                 "margin": "auto",
@@ -78,7 +78,7 @@ function App({ Component, pageProps }: AppProps) {
             })}>
                 <Component {...pageProps} />
             </div>
-            <DisplaySettingsDialog />
+            <Display />
         </>
     );
 }

yarn.lock

@@ -1395,10 +1395,10 @@
   resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.3.tgz#555193ab2e3bb3b6adc3d551c9c030d9e860daf6"
   integrity sha512-k2Ty1JcVojjJFwrg/ThKi2ujJ7XNLYaFGNB/bWT9wGR+oSMJHMa5w+CUq6p/pVrKeNNgA7pCqEcjSnHVoqJQFw==
 
-"@gouvfr/dsfr@1.8.5":
-  version "1.8.5"
-  resolved "https://registry.yarnpkg.com/@gouvfr/dsfr/-/dsfr-1.8.5.tgz#e99d095e99debcce0c41db18989637290d588b78"
-  integrity sha512-29L+THvWmYJXztPa0Os5TS9yD2WQbrH7VnCKxkyUXQZQ+6lsGebtz0GdCnLexOWDfCn1y53Mh7+/ihxI/z0Vjw==
+"@gouvfr/dsfr@1.8.4":
+  version "1.8.4"
+  resolved "https://registry.yarnpkg.com/@gouvfr/dsfr/-/dsfr-1.8.4.tgz#e8f7520973460db3729e57816633f569b0a28260"
+  integrity sha512-nWWpeAUUe6ghi3L0wwWkh7AxpAW+IvTdUlm5H0wDdjHTELqs+1Mis6jdU7tC9hxqrW9R5b3RNzhcCOqW6wthYQ==
 
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"