docs(browserTitle): add browser tab title documentation

docs/src/data/components/patterns.js

@@ -14,6 +14,13 @@ export const data = [
     code: 'Available',
     image: () => <StaticImage src="./images/patterns/email.png" alt="Email" imgStyle={imgStyle} />,
   },
+  {
+    link: 'browserTabTitle/usage',
+    design: 'Available',
+    name: 'Browser Tab Title',
+    code: 'Available',
+    image: () => <StaticImage src="./images/patterns/fileUploader.png" alt="File uploader" imgStyle={imgStyle} />,
+  },
   {
     link: 'fileUploader/usage',
     design: 'Available',

docs/src/data/nav/patterns.yaml

@@ -2,6 +2,8 @@ base: patterns
 menus:
   - label: Overview
     link: /patterns/overview/all-patterns/
+  - label: Browser Tab Title
+    link: /patterns/browserTabTitle/usage/
   - label: Email
     link: /patterns/email/usage/
   - label: File Uploader

docs/src/pages/patterns/browserTabTitle/usage.mdx

@@ -0,0 +1,127 @@
+---
+title: Browser Tab Title
+description: A browser tab title describes a webpage's content, helping users navigate between tabs.
+tabs: ["Usage"]
+keywords: ['Browser Tab Title', 'Tab Title', 'Title']
+---
+
+A browser tab title is the text displayed in a browser tab to describe the webpage's content, helping users navigate between multiple tabs.
+
+The title should be descriptive, concise, and contextually relevant to the content or functionality of the page. 
+
+![An example of browser tab title and the popover while hovering over it](./images/intro-image.png)
+<Caption>An example of browser tab title and the popover while hovering over it</Caption>
+
+### Structure
+
+The tab title should follow the below mentioned structure: 
+
+**[Most Relevant Information] - [Contextual Details] | Innovaccer**
+
+<ul>
+  <li>**[Most Relevant Information]:** Most specific and relevant details, such as the page name, the action being taken, the document title, the item being viewed (e.g., a document, patient profile, or project name), or any actionable insights.</li>
+  <li>**[Contextual Details]:** Supporting context, such as the section, feature, or step, if applicable, to help the user understand their position within the broader application.</li>
+  <li>**| Innovaccer:** Always append the brand name at the end to maintain consistency and brand recognition. It is acceptable to white-label the brand name if necessary.</li>
+</ul>
+
+**Note:** By default, the app name will be shown along with the brand name.
+
+For example: Care Management | Innovaccer
+
+![Structure of browser tab title](./images/structure.png)
+<Caption>Structure of browser tab title</Caption>
+
+### Usage
+
+#### Title Length & Overflow
+
+Keep titles concise and informative, aiming for 35-45 characters. Most browsers truncate or show ellipses (...) after 50-60 characters.
+
+![An example of truncation of overflowing browser tab title](./images/title-length.png)
+<Caption>An example of truncation of overflowing browser tab title</Caption>
+
+<br />
+<br />
+
+#### Best Practices
+
+Page titles should:
+
+<ul>
+  <li>Present the most important or specific information first.</li>
+  <li>Be concise, easy to read, and understand.</li>
+  <li>Clearly represent the content or purpose of the page.</li>
+</ul>
+
+![Browser Tab Title: Clinical Data - Francis Joy | Innovaccer](./images/best-practices.png)
+<Caption>Browser Tab Title: Clinical Data - Francis Joy | Innovaccer</Caption>
+
+<br />
+<br />
+
+#### Examples
+
+<ol>
+  <li>
+    <b>Ensure that the most relevant information dynamically updates to reflect the current state.</b>
+
+    ![Browser Tab Title: Untitled Cohort - Cohort Builder | Innovaccer](./images/example-1.png)
+    <Caption>Browser Tab Title: Untitled Cohort - Cohort Builder | Innovaccer</Caption>
+  </li>
+
+  <br />
+  <br />
+
+  <li>
+    <b>Consider what the user is likely to prioritize when scanning through multiple tabs.</b>
+
+    ![Browser Tab Title: Behavioral Health Care Plan - Francis Joy | Innovaccer](./images/example-2.png)
+    <Caption>Browser Tab Title: Behavioral Health Care Plan - Francis Joy | Innovaccer</Caption>
+  </li>
+
+  <br />
+  <br />
+
+  <li>
+    <b>Include contextual information to help the user understand where they are within the broader application.</b>
+
+    ![Browser Tab Title: ER Admit - Francis Joy’s Care Protocols  | Innovaccer](./images/example-3.png)
+    <Caption>Browser Tab Title: ER Admit - Francis Joy’s Care Protocols  | Innovaccer</Caption>
+  </li>
+
+  <br />
+  <br />
+
+  <li>
+    <b>Reflect the user’s position within the application hierarchy moving from specific to general.</b>
+
+    ![Browser Tab Title: Letter Release Campaign - Campaigns | Innovaccer](./images/example-4.png)
+    <Caption>Browser Tab Title: Letter Release Campaign - Campaigns | Innovaccer</Caption>
+  </li>
+</ol>
+
+<br />
+<br />
+
+#### Simplified Browser History Navigation
+
+A structured browser tab title makes it easier to identify and navigate through previously visited pages in the browser history.
+
+##### Avoid Unnecessary Context
+
+If the main information in the tab title clearly conveys the page's purpose, avoid adding contextual information. The goal is to keep the title concise and focused.
+
+![Browser Tab Title: Ortho Knee Tactic | Innovaccer](./images/avoid-unnecessary-context.png)
+<Caption>Browser Tab Title: Ortho Knee Tactic | Innovaccer</Caption>
+
+<br />
+<br />
+
+##### White Labeling
+
+Browser tab title can be white labeled if needed. 
+
+<b>Example:</b> Campaigns | Customer name
+
+![Campaigns | Customer name](./images/white-label.png)
+<Caption>Campaigns | Customer name</Caption>