7.0.x doc updates (#80)

* Update docusaurus.config.js

* Update docusaurus.config.js

* Update pages.yml

* Update Forms.md

* ng broken links

* Fixing broken file content

* Fix broken links

* Fixig more broken links

* 7.0.x updates

* fixed tag issues

* 7.0.x changes

Author: vinod-aot

new-doc/versioned_docs/version-7.0.0/Features/BPMN Email.md

@@ -9,25 +9,29 @@ slug: /email-connector
 
 ### Send an Email from a Flow
 
-The following steps explain how to configure and use the email connector (via `mail-send`) in a BPMN flow.
+The following steps explain how to configure and use the email connector (via `mail-send` connector) in a BPMN flow.
 
 1. #### Flow
-   Launch your BPMN Modeler and open the flow where you want to send an email. Insert or select a **Service Task** in the workflow where the email should be sent.
+   Launch your BPMN Modeler and open the flow where you want to send an email. Insert or select a `Service Task` in the flow where the email should be sent.
 
 2. #### Set the Service Task to Use a Connector
    Select the Service Task and open the Properties/Details panel. Under **Implementation**:
    - Choose **Type** as `Connector`.
    - Set the **Connector ID** to `mail-send` (or your engine-specific ID).
+   
+	Select the `Service Task` and open the `Properties panel` :
+	- Goto `Implementation > Type` and set the value to `Connector`
+	- Set `Connector Id` as `mail-send` 
 
    *Reference Screenshot:*
 
    ![Image](/img/7.0.0/bpm/email.png)
 
 3. #### Configure Connector Inputs
-   Under **Connector inputs**, define parameters for the email connector. Common inputs include **to**, **subject**, and **html** or **text**. You can also configure additional parameters like **cc**, **bcc**, **attachments**, and so on.
+   Under `Connector inputs`, define parameters for the email connector. Common inputs include `to`, `subject`, and `html` or `text`. You can also configure additional parameters like `cc`, `bcc`, `attachments`, and so on. 
 
 4. #### Save and Deploy
-   When all required inputs are set, ensure your BPMN model shows **0 Errors, 0 Warnings**. Save and deploy the process to your BPM engine.
+   When all required inputs are set, ensure your BPMN model shows **0 Errors, 0 Warnings**, save and publish.
 
 5. #### Test the Flow
    Run the process. When the flow reaches the **Send Email** Service Task, the engine will invoke the `mail-send` connector with your specified parameters. Verify the recipient’s inbox to confirm success.

new-doc/versioned_docs/version-7.0.0/Features/BPMN Listeners.md

@@ -11,7 +11,7 @@ slug: /bpmn-listeners
 
 Listeners provide a powerful mechanism to execute external Java code or evaluate expressions in response to specific events during process execution. They are frequently used during process development to implement custom behavior at key stages of the process.
 
-Depending on their configuration, listeners can be triggered at various points, such as the start or end of an activity, gateway, process instance, or specific events. This flexibility makes them a versatile tool for extending and customizing process logic.
+Depending on their configuration, listeners can be triggered at various points, such as the `start` or `end` of an _activity, gateway, process instance, or specific events_. This flexibility makes them a versatile tool for extending and customizing process logic.
 
 ## Predefined Listeners
 

new-doc/versioned_docs/version-7.0.0/Features/BPMN Variables.md

@@ -7,7 +7,7 @@ slug: /variables
 
 ---
 
-BPMN variables are the form fields added to the layout. These fields, if selected, are passed to BPMN during form submission, allowing BPMN to access their values. The selected variables will also be available to be displayed in the task list under Review > Tasks.
+Flow variables are the form fields added to the flow. These fields, if selected, are passed to flow during form submission, allowing flow to access their values. The selected variables will also be available to be displayed in the task list under `Review > Tasks`.
 
 1. Create a new form or Edit an already created form
 
@@ -29,4 +29,6 @@ BPMN variables are the form fields added to the layout. These fields, if selecte
 
      ![Image](/img/7.0.0/Screenshot-2024-11-26-165614.png)
 
-5. Once the form is submitted you will have access to the variables you have selected in the previous step in the Review > Tasks. You can click on "Create New Filter" button at the top, or edit a filter that has been created before. In the side popup you can click on "Task attributes" and select which varibles to show.
+5. Once the form is submitted you will have access to the variables you have selected in the previous step in the Review > Tasks. You can click on "Create New Filter" button at the top, or edit a filter that has been created before. In the side popup you can click on "Task attributes" and select which varibles to show.
+`
+5. After the form is submitted, the selected variables from the previous step become available under `Review > Tasks`. You can either click `Create New Filter` at the top or edit an existing filter. In the side panel that appears, click `Task attributes` and choose which variables you want to display.

new-doc/versioned_docs/version-7.0.0/Features/Custom Theme.md

@@ -7,39 +7,81 @@ slug: /theme
 
 ---
 
-### Introduction
+## Introduction
 
-This guide explains how to customize themes in your application by modifying various CSS variables. These changes allow you to adjust the visual appearance of navigation menus, buttons, headers, fonts, and more, creating a tailored experience for your users.
+This page describes how to customize the application’s visual theme by updating CSS variables. You can modify the appearance of navigation menus, buttons, headers, fonts, and other interface elements to align with your organization's design standards.
 
-### Customizable CSS Variables
+## Customizable CSS Variables
 
 The following table outlines the available CSS variables and their effects:
 
+### Navbar
+
+| Variable | Default Value | Effect |
+|----------|---------------|--------|
+| `--navbar-bg-color` | #013366 | Changes the background color of the navbar and header. |
+| `--navbar-active-submenu-bg-color` | #1E5189 | Changes the background color of the submenu in the navbar when clicked. |
+| `--navbar-active-submenu-font-color` | white | Changes the font color of the submenu in the navbar when clicked. |
+| `--navbar-active-submenu-font-weight` | 500 | No description provided. |
+| `--navbar-active-submenu-font-size` | 1rem | No description provided. |
+| `--navbar-main-menu-active-bg-color` | #1E5198 | Changes the background color of the main menu in the navbar when clicked. |
+| `--navbar-main-menu-active-font-color` | #FFFFFF | Changes the font color of the main menu in the navbar and other header elements. |
+| `--navbar-menu-hover-bg-color` | #1E5198 | Changes the background color of the main menu and submenu in the navbar when hovered. |
+| `--navbar-hover-submenu-bg-color` | #1E5198 | No description provided. |
+| `--navbar-hover-submenu-font-color` | white | No description provided. |
+| `--navbar-hover-submenu-font-weight` | 500 | No description provided. |
+| `--navbar-hover-submenu-font-size` | 1rem | No description provided. |
+
+---
+
+### Buttons
+
+| Variable | Default Value | Effect |
+|----------|---------------|--------|
+| `--primary-btn-font-color` | white | Changes the font color of primary buttons, such as "Submit," "Create New Role," etc. |
+| `--primary-btn-bg-color` | #013366 | Changes the background color of primary buttons. |
+| `--primary-btn-hover-bg-color` | #1E5189 | Changes the background color of primary buttons when hovered. |
+| `--secondary-btn-font-color` | #474543 | Changes the font color of secondary buttons, such as "Edit," "History," and "Undo." |
+| `--secondary-btn-bg-color` | #FFFFFF | Changes the background color of secondary buttons. |
+| `--secondary-btn-hover-bg-color` | #EDEBE9 | Changes the background color of secondary buttons when hovered. |
+| `--link-btn-border-radius` | 4px | No description provided. |
+| `--sm-btn-border-radius` | 4px | No description provided. |
+| `--md-btn-border-radius` | 4px | No description provided. |
+| `--lg-btn-border-radius` | 6px | No description provided. |
+
+---
+
+### Typography & Fonts
+
 | Variable | Default Value | Effect |
 |----------|---------------|--------|
-| `--custom-logo-path` |  | Fully qualified logo URL to replace the app logo. |
-| `--navbar-active-submenu-bg-color` | #145a32 | Changes the background color of the submenu in the navbar when clicked. |
-| `--navbar-active-submenu-font-color` | #ba4a00 | Changes the font color of the submenu in the navbar when clicked. |
-| `--navbar-menu-hover-bg-color` | #bb8fce | Changes the background color of the main menu and submenu in the navbar when hovered. |
-| `--navbar-main-menu-active-bg-color` | #fad7a0 | Changes the background color of the main menu in the navbar when clicked. |
-| `--navbar-main-menu-active-font-color` | #641e16 | Changes the font color of the main menu in the navbar and other header elements. |
-| `--navbar-bg-color` | #b7950b | Changes the background color of the navbar and header. |
-| `--custom-title` | "SampleWebsite.in" | Updates the header title. |
-| `--primary-btn-font-color` | #e59866 | Changes the font color of primary buttons, such as "Submit," "Create New Role," etc. |
-| `--primary-btn-bg-color` | #0b5345 | Changes the background color of primary buttons. |
-| `--primary-btn-hover-bg-color` | #a9dfbf | Changes the background color of primary buttons when hovered. |
-| `--secondary-btn-font-color` | #d6dbdf | Changes the font color of secondary buttons, such as "Edit," "History," and "Undo." |
-| `--secondary-btn-bg-color` | #5d6d7e | Changes the background color of secondary buttons. |
-| `--secondary-btn-hover-bg-color` | #aeb6bf | Changes the background color of secondary buttons when hovered. |
-| `--default-font-color` | #7d3c98 | Changes the default font color for various components, including forms, task headings, and metrics. |
-| `--default-font-size` | 2rem | Sets the default font size for elements like navbar submenus and button labels. |
-| `--ff-primary` | #c32047 | Sets the primary theme color for borders, active tabs, and other key elements. |
-| `--ff-secondary` | #cae85a | Sets the secondary theme color for additional highlights and accents. |
-
-### Applying the Theme
-
-1. Identify the CSS variables you want to customize based on the table above.
-2. Update the values in your theme JSON.
-3. Host the JSON file to file storage and configure the deployment to use this theme file.
+| `--default-font-color` | #2D2D2D | Changes the default font color for various components, including forms, task headings, and metrics. |
+| `--default-font-size` | 1rem | Sets the default font size for elements like navbar submenus and button labels. |
+| `--default-font-family` | BC Sans, sans-serif | No description provided. |
+| `--default-font-family-url` | https://raw.githubusercontent.com/bcgov/bc-sans/refs/heads/master/css/BC_Sans.css?family=BC+Sans | No description provided. |
+| `--default-link-color` | #255A90 | No description provided. |
+
+---
+
+### Branding & General
+
+| Variable | Default Value | Effect |
+|----------|---------------|--------|
+| `--custom-logo-path` | https://raw.githubusercontent.com/jimin-aot/mcfd-reporting-assets/main/images/BC_CFD_H_RGB_rev.png | Fully qualified logo URL to replace the app logo. |
+| `--custom-logo-horizontal-align` | left | No description provided. |
+| `--custom-logo-height` | 3rem | No description provided. |
+| `--custom-title` | MCFD Reporting | Updates the header title. |
+| `--ff-primary` | #013366 | Sets the primary theme color for borders, active tabs, and other key elements. |
+| `--ff-secondary` | #EDEBE9 | Sets the secondary theme color for additional highlights and accents. |
+| `--hide-formsflow-logo` | true | No description provided. |
+| `--default-danger-color` | #CE3E39 | No description provided. |
+
+
+## Applying the Theme
+
+1. Review the table above and identify the CSS variables you want to customize.
+1. Define your custom values in a JSON theme file.
+2. Upload the JSON file to a publicly accessible location.
+3. Update your deployment configuration to reference this file by setting the `CUSTOM_THEME_URL` environment variable in the `forms-flow-web` service.
 
 **Tip**: _Test your changes in different browsers and screen sizes to ensure consistency across the application._

new-doc/versioned_docs/version-7.0.0/Features/Forms-anonymous.md

@@ -7,24 +7,26 @@ slug: /anonymous-form
 
 ---
 
-An anonymous form allows users to submit form entries anonymously. Users can access the form using the form URL without login to the application.
+Anonymous (public) forms allow users to submit entries without logging into the application. These forms can be accessed directly through a shared URL.
 
-Below steps describes how you can design a form anonymous.
+Follow the steps below to enable anonymous submission for a form:
 
-1. Create a new form or edit an already created form under Design > Forms.
+## Steps to Enable Anonymous Access
 
-2. After you are satified with the layout and the flow, click on the **Settings** button in the top bar.
+1. Create a new form or edit an existing one by navigating to `Design > Forms`.
 
-3. In the Settings popup scroll down to **Who Can Create Submissions**.
+2. After finalizing the form layout and flow, click the **Settings** button in the top bar.
+
+3. In the Settings popup, scroll down to the **Who Can Create Submissions** section.
 
    ![Image](/img/7.0.0/Screenshot-2024-11-25-170245.png)
 
-4. Check or make sure **Anonymous users** checkbox is selected
+4. Ensure the **Anonymous users** checkbox is selected.
 
-   **Do not forget to click "Save Changes"**
+   > **Important**: Click **Save Changes** to apply the setting.
 
-   **Note**: _Forms will not be available to anonymous users if they are not published._
+   > **Note**: The form must be published for anonymous users to access it.
 
-5. Then you can share the URL to allow other users to submit anonymous forms by scrolling down and copying the form's **URL Path**
+5. To share the form, scroll down and copy the **URL Path**. Share this link with users to allow anonymous submissions.
 
    ![Image](/img/7.0.0/Screenshot-2024-11-25-170535.png)

new-doc/versioned_docs/version-7.0.0/Features/Forms-custom-components.md

@@ -7,38 +7,49 @@ slug: /custome-components
 
 ---
 
-One of the more powerful features of the formsflow.ai platform is the ability to create your own custom form components. The process of creating a custom component involves extending a base class of the component that is "closest" to the implementation you desire, and then override methods or introduce new methods that will implement your custom logic. All of the existing components within the platform also use this same method, so you can see the multitude of examples by inspecting how the base components for the Forms-flow renderer are implemented.
+One of the powerful features of the formsflow.ai platform is the ability to create custom form components. This is done by extending a base component class that closely matches the functionality you want to build. You can override existing methods or introduce new ones to implement your specific logic.
 
-In order to create the best components, it is important to understand the critical methods used to define a new component. They are as follows.
+All default components in the platform are implemented this way, so you can refer to them as examples by reviewing the source code of the Formsflow renderer.
 
 ## Extending Components
 
-Every custom component will derive from a base class, whose behaviour is closest to the behaviour of the component you wish to create. It is possible to extend any other component within the Form.io renderer and a list of all of these components and their classes can be found [here](https://github.com/formio/formio.js/tree/master/src/components).
+Every custom component must inherit from a base class that aligns closely with the behavior and data model of your intended component. You can extend any existing component available in the [Form.io renderer](https://github.com/formio/formio.js/tree/master/src/components).
 
-Because of this, the first task in building a custom component is to determine which component most closely resembles the behaviour and data model of the component you are looking to achieve. For example, if you wish to build a multi-button select component, it may be best to start with a radio component since this is the component that most closely resembles the behaviour of the component you wish to create.
+### Choosing a Base Component
 
-If you are unsure, then it is also fine to derive from the "core" components which serve as the base for all other components within the renderer. These core components are as follows.
+Start by identifying which existing component most closely matches the functionality you want. For example, to build a multi-button selection component, it is recommended to extend the `RadioComponent` because it has similar selection behavior.
 
-| Class | Extends | Description |
-|-------|---------|-------------|
-| Component | Element | Base component class |
-| Field | Component | Component that derives from Component class that implements a "field" render template |
-| Multivalue | Field | A component that is able to implement the "multiple" configuration allowing for multiple inputs for this field type. |
-| Input | Multivalue | A component type that implements an HTML value input. |
+If no existing component aligns closely enough, you can derive from one of the core classes. These core classes form the foundation of all components in the Form.io renderer:
 
-Each of the components can be extended by first referencing them from the Components.components object, and then extending them as follows.
+| Class       | Extends     | Description                                                                 |
+|-------------|-------------|-----------------------------------------------------------------------------|
+| `Component` | `Element`   | Base class for all components.                                              |
+| `Field`     | `Component` | Adds rendering logic for form fields.                                       |
+| `Multivalue`| `Field`     | Supports multiple values for a single component.                            |
+| `Input`     | `Multivalue`| Implements HTML input behavior for user interaction.                        |
+
+### How to Extend
+
+To extend a component, reference it from the `Components.components` object and define your custom class as follows:
 
 ```javascript
 const Input = Formio.Components.components.input;
+
 class MyInput extends Input {
-  // Custom logic here
+  // Override or define your methods here
 }
 ```
+You can now register this custom component and use it in your form schema.
 
-For the most generic components, it is fine to derive from "Component", but in most value components, you may wish to derive from the Input component.
+For generic use cases, you can derive your custom component from the `Component` base class. However, if your component is expected to handle user input or form values, it is recommended to extend the `Input` class, which provides built-in support for value management and input behavior.
 
 ## Component Methods
-Once you derive from a base component, the next step is to define methods that either override base behaviour or introduce new behaviour into the component class. It is recommended to look at the source code of your "base" component and the classes that it extends to understand what methods you have available to you, but the majority of all behaviour can be achieved by implementing some of the following methods.
+
+After extending a base component, the next step is to define methods that either override default behavior or add new functionality to your custom component.
+
+To understand which methods are available, review the source code of the base component you are extending, along with its parent classes. This will give you insight into what functionality is inherited and what can be customized.
+
+Most component behavior can be controlled or modified by implementing the following commonly used methods:
 
 ```javascript
 const Input = Formio.Components.components.input;