---
name: Page
description: A simple module for setting up new pages, with routes, etc., and a consistent look & feel
user_stories:
  - As a developer I would like to quickly configure new pages that handle routing, app/menu toolbar, etc.
screens: ""
workflow: ""
test_plan: []
components:
  - name: Page
    type: Components
    description: A simple module for setting up new pages, with routes, etc., and a consistent look & feel
    behaviors: ""
    exists: "No"
    package: "No"
    schema:
      - name: name
        type: string
        description: The name of this page
        schema_type: prop
        required: false
      - name: path
        type: string
        description: The path to use for the route
        schema_type: prop
        required: false
      - name: disableToolbar
        type: boolean
        description: Whether or not to disable showing the toolbar
        schema_type: prop
        required: false
      - name: toolbarItems
        type: object
        description: The props to pass along to the toolbar
        schema_type: prop
        required: false
      - name: toolbarComponent
        type: React.FC
        description: The component to append to the toolbar.  Useful for adding full customization of the toolbar
        schema_type: prop
        required: false
      - name: disableAppDrawer
        type: boolean
        description: Whether or not to disable the app drawer menu
        schema_type: prop
        required: false
      - name: appDrawerSettings
        type: object
        description: The props to pass long to the app drawer
        schema_type: prop
        required: false
      - name: tabs
        type: object[]
        description: The list of tabs and their settings to display under the toolbar
        schema_type: prop
        required: false
      - name: disableTabs
        type: boolean
        description: Whether or not to disable showing the tabs
        schema_type: prop
        required: false
      - name: children
        type: JSX.Element
        description: The content to place inside the page
        schema_type: prop
        required: false
      - name: setToolbarContent()
        type: () => void
        description: A method for updating the page's toolbar content.
        schema_type: prop
        required: false
    tests:
      - it: (Rendering) Should render the component in the dom
        type: Integration
      - it: (Rendering) Should be accessible at the url path indicated in the path props
        type: Integration
      - it: (Rendering) Should not render a toolbar when the disableToolbar props is true
        type: Integration
      - it: (Rendering) Should render the component provided in the toolbarComponent props instead of the default toolbar if one is provided
        type: Integration
      - it: (Rendering) Should not render an appDrawer if the disableAppDrawer prop is true
        type: Integration
      - it: (Rendering) Should render the same number of tabs that are in the tabs array
        type: Integration
      - it: (Rendering) Should not render any page tabs if the disableTabs prop is true
        type: Integration
      - it: (Rendering) Should always render children
        type: Integration
      - it: (Methods) Should update the toolbar content if the setToolbarContent() method is ever called
        type: Integration
      - it: (Events) Should trigger the onComponentRender("Page") plugin hook when a Page renders in the dom
        type: Integration
      - it: (Events) Should trigger the onComponentRender("Toolbar") plugin hook when a toolbar renders in the dom
        type: Integration
      - it: (Events) Should trigger the onComponentRender("AppDrawer") plugin hook when the app drawer renders in the dom
        type: Integration
      - it: (Events) Should render the onListItems("toolbarItems") plugin hook when the list of toolbar actions are being generated
        type: Integration
      - it: (Events) Should render the onListItems("pageTabs") plugin hook when the list of page tabs are being generated
        type: Integration
database: []
api: []