Clearly show how components should be imported

Author: garronej

.storybook/customTheme.js

@@ -2,7 +2,7 @@ import { create } from "@storybook/theming";
 
 const brandImage= "logo.png";
 const brandTitle= "@codegouvfr/react-dsfr";
-const brandUrl= "https://github.com/@codegouvfr/react-dsfr";
+const brandUrl= "https://github.com/codegouvfr/react-dsfr";
 const fontBase= '"Marianne", arial, sans-serif';
 const fontCode= "monospace";
 

docs/getStory.tsx

@@ -120,14 +120,19 @@ export function getStoryFactory<Props extends Record<string, any>>(params: {
         return out;
     }
 
+    const componentName = symToStr(wrappedComponent);
+
     return {
         "meta": id<Meta>({
-            "title": `${sectionName}/${symToStr(wrappedComponent)}`,
+            "title": `${sectionName}/${componentName}`,
             "component": Component,
             "parameters": {
                 "docs": {
                     "description": {
-                        "component": description
+                        "component": [
+                            `\`import { ${componentName} } from "@codegouvfr/react-dsfr/${componentName}"\``,
+                            ...(description === undefined ? [] : [description])
+                        ].join("  \n")
                     }
                 }
             },

docs/sectionName.ts

@@ -1 +1 @@
-export const sectionName = "sandbox";
+export const sectionName = "components";