name -> title

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/canon/report.api.md

@@ -988,11 +988,11 @@ export interface HeaderPageProps {
   // (undocumented)
   description?: string;
   // (undocumented)
-  name?: string;
-  // (undocumented)
   options?: HeaderPageOption[];
   // (undocumented)
   tabs?: HeaderPageTab[];
+  // (undocumented)
+  title?: string;
 }
 
 // @public
@@ -1010,11 +1010,11 @@ export interface HeaderProps {
   // (undocumented)
   icon?: React.ReactNode;
   // (undocumented)
-  name?: string;
-  // (undocumented)
   options?: HeaderOption[];
   // (undocumented)
   tabs?: HeaderTab[];
+  // (undocumented)
+  title?: string;
 }
 
 // @public

packages/canon/src/components/Header/Header.tsx

@@ -24,13 +24,13 @@ import { HeaderTabs } from './HeaderTabs';
  * @public
  */
 export const Header = (props: HeaderProps) => {
-  const { tabs, icon, name, options, breadcrumbs } = props;
+  const { tabs, icon, title, options, breadcrumbs } = props;
 
   return (
     <>
       <HeaderToolbar
         icon={icon}
-        name={name}
+        title={title}
         options={options}
         breadcrumbs={breadcrumbs}
       />

packages/canon/src/components/Header/HeaderToolbar.tsx

@@ -29,7 +29,7 @@ import { motion, useScroll, useTransform } from 'motion/react';
  * @public
  */
 export const HeaderToolbar = (props: HeaderProps) => {
-  const { icon, name, options, breadcrumbs } = props;
+  const { icon, title, options, breadcrumbs } = props;
   const { classNames } = useStyles('Header');
 
   const { scrollY } = useScroll();
@@ -94,7 +94,7 @@ export const HeaderToolbar = (props: HeaderProps) => {
             <div className={classNames.toolbarIcon}>
               {icon || <RiShapesLine />}
             </div>
-            {name || 'Your plugin'}
+            {title || 'Your plugin'}
           </div>
           {breadcrumbs && (
             <motion.div

packages/canon/src/components/Header/types.ts

@@ -23,7 +23,7 @@ import { MutableRefObject } from 'react';
  */
 export interface HeaderProps {
   icon?: React.ReactNode;
-  name?: string;
+  title?: string;
   tabs?: HeaderTab[];
   options?: HeaderOption[];
   breadcrumbs?: HeaderBreadcrumb[];

packages/canon/src/components/HeaderPage/HeaderPage.stories.tsx

@@ -99,7 +99,7 @@ const layoutDecorator = [
 
 export const Default: Story = {
   args: {
-    name: 'Header Page',
+    title: 'Header Page',
   },
 };
 

packages/canon/src/components/HeaderPage/HeaderPage.tsx

@@ -28,12 +28,12 @@ import { RiMore2Line } from '@remixicon/react';
  * @public
  */
 export const HeaderPage = (props: HeaderPageProps) => {
-  const { name, description, options } = props;
+  const { title, description, options } = props;
 
   return (
     <Flex pl="4" pr="2" mt="6" justify="between">
       <Flex direction="column" gap="2">
-        <Heading variant="title4">{name}</Heading>
+        <Heading variant="title4">{title}</Heading>
         <Text>{description}</Text>
       </Flex>
       <div>

packages/canon/src/components/HeaderPage/types.ts

@@ -20,7 +20,7 @@
  * @public
  */
 export interface HeaderPageProps {
-  name?: string;
+  title?: string;
   description?: string;
   tabs?: HeaderPageTab[];
   options?: HeaderPageOption[];