Docked composer (#3062)

* docked composer is working

* test commit

* add snapshots

* cleanup code, add test

* add component docs

* fix indentation

* remove unused imports

* add body prop

* remove expand button, show minimize or expand button depending on composer state, add class name parameter, add assitive text parameters, add story for minimized state

* update props

* fix browser test

* remove boilerplate comments, rename callbacks to be onRequest*, use generated id for all components, use default props

Co-authored-by: Greg Hui <[email protected]>

Author: 2FALockedMeOutOfMyAcct

Diff for: components/component-docs.json

@@ -6657,6 +6657,114 @@
         "SLDS-component-path": "/components/datepickers",
         "dependencies": []
     },
+    "docked-composer": {
+        "description": "The Docked Composer is a persistent utility bar that allows a user to continually use the app to complete tasks or gather information while expanding/collapsing a composer window. [component blueprint guidelines](https://www.lightningdesignsystem.com/components/docked-composer/).",
+        "displayName": "DockedComposer",
+        "methods": [
+            {
+                "name": "getId",
+                "docblock": null,
+                "modifiers": [],
+                "params": [],
+                "returns": null
+            }
+        ],
+        "props": {
+            "id": {
+                "type": {
+                    "name": "string"
+                },
+                "required": false,
+                "description": "HTML id for component.\n_Tested with snapshot testing._"
+            },
+            "isOpen": {
+                "type": {
+                    "name": "bool"
+                },
+                "required": false,
+                "description": "Whether the docked composer is open or closed.\n_Tested with snapshot testing._"
+            },
+            "header": {
+                "type": {
+                    "name": "union",
+                    "value": [
+                        {
+                            "name": "string"
+                        },
+                        {
+                            "name": "node"
+                        }
+                    ]
+                },
+                "required": false,
+                "description": "Text or node to display in the header.\n_Tested with snapshot testing._"
+            },
+            "body": {
+                "type": {
+                    "name": "node"
+                },
+                "required": false,
+                "description": "Body of the composer.\n_Tested with snapshot testing._"
+            },
+            "assistiveText": {
+                "type": {
+                    "name": "shape",
+                    "value": {
+                        "expandButton": {
+                            "name": "string",
+                            "required": false
+                        },
+                        "minimizeButton": {
+                            "name": "string",
+                            "required": false
+                        },
+                        "closeButton": {
+                            "name": "string",
+                            "required": false
+                        }
+                    }
+                },
+                "required": false,
+                "description": "**Assistive text for accessibility**\nThis object is merged with the default props object on every render.\n* `expandButton`: This is a visually hidden label for expand button shown when the composer is minimized.\n* `minimizeButton`: This is a visually hidden label for minimize button shown when the composer is expanded.\n* `closeButton`: This is a visually hidden label for close button.\n_Tested with snapshot testing._",
+                "defaultValue": {
+                    "value": "{\n\texpandButton: 'Expand',\n\tminimizeButton: 'Minimize',\n\tcloseButton: 'Close',\n}",
+                    "computed": false
+                }
+            },
+            "classNameContainer": {
+                "type": {
+                    "name": "string"
+                },
+                "required": false,
+                "description": "Additional class name added to the container with slds-docked_container class.\n_Tested with snapshot testing._"
+            },
+            "events": {
+                "type": {
+                    "name": "shape",
+                    "value": {
+                        "onRequestMinimize": {
+                            "name": "func",
+                            "required": false
+                        },
+                        "onRequestExpand": {
+                            "name": "func",
+                            "required": false
+                        },
+                        "onRequestClose": {
+                            "name": "func",
+                            "required": false
+                        }
+                    }
+                },
+                "required": false,
+                "description": "Event Callbacks\n* `onRequestMinimize`: Called when minimize button is clicked.\n* `onRequestExpand`: Called when the expand button is clicked.\n* `onRequestClose`: Called when the close button is clicked.\n_Tested with Mocha testing._"
+            }
+        },
+        "route": "docked-composers",
+        "display-name": "Docked Composers",
+        "SLDS-component-path": "/components/docked-composer",
+        "dependencies": []
+    },
     "dynamic-icon": {
         "description": "A set of delightful animated icons.",
         "methods": [