docs(side-panel, side-modal): add footer examples to docs

packages/paste-codemods/tools/.cache/mappings.json

@@ -246,6 +246,7 @@
   "SidePanelButton": "@twilio-paste/core/side-panel",
   "SidePanelContainer": "@twilio-paste/core/side-panel",
   "SidePanelContext": "@twilio-paste/core/side-panel",
+  "SidePanelFooter": "@twilio-paste/core/side-panel",
   "SidePanelHeader": "@twilio-paste/core/side-panel",
   "SidePanelHeaderActions": "@twilio-paste/core/side-panel",
   "SidePanelPushContentWrapper": "@twilio-paste/core/side-panel",

packages/paste-website/src/component-examples/SideModalExamples.ts

@@ -52,8 +52,8 @@ const SideModalFooterExample = () => {
         </SideModalBody>
         <SideModalFooter>
           <SideModalFooterActions>
-            <Button variant="secondary">Secondary action</Button>
-            <Button variant="primary">Primary action</Button>
+          <Button variant="primary">Primary action</Button>
+          <Button variant="secondary">Secondary action</Button>
           </SideModalFooterActions>
         </SideModalFooter>
       </SideModal>

packages/paste-website/src/pages/components/side-panel/index.mdx

@@ -45,6 +45,7 @@ export const getStaticProps = async () => {
 <StoryPreview
   title="Basic Side Panel example"
   storyID="components-side-panel--basic"
+  height="500px"
   code={`
 export const SidePanelExample = (): React.ReactNode => {
   const [isOpen, setIsOpen] = React.useState(true);
@@ -64,6 +65,9 @@ export const SidePanelExample = (): React.ReactNode => {
           <Separator orientation="horizontal" verticalSpacing="space0" />
           Side Panel content goes here.
         </SidePanelBody>
+        <SidePanelFooter>
+          Chat composer goes here.
+        </SidePanelFooter>
       </SidePanel>
       <SidePanelPushContentWrapper>
         <Box paddingTop="space40" paddingLeft="space40" paddingRight="space40">
@@ -112,6 +116,7 @@ Pass the `isOpen` and `setIsOpen` props to the `SidePanelContainer` component to
 <StoryPreview
   title="Basic Side Panel example"
   storyID="components-side-panel--basic"
+  height="500px"
   code={`
 export const SidePanelExample = (): React.ReactNode => {
   const [isOpen, setIsOpen] = React.useState(true);
@@ -131,6 +136,9 @@ export const SidePanelExample = (): React.ReactNode => {
           <Separator orientation="horizontal" verticalSpacing="space0" />
           Side Panel content goes here.
         </SidePanelBody>
+        <SidePanelFooter>
+          Chat composer goes here.
+        </SidePanelFooter>
       </SidePanel>
       <SidePanelPushContentWrapper>
         <Box paddingTop="space40" paddingLeft="space40" paddingRight="space40">
@@ -148,6 +156,7 @@ To internationalize Side Panel, simply pass different text as children to the Si
 <StoryPreview
   title="Internationalized Side Panel example"
   storyID="components-side-panel--i-18-n"
+  height="500px"
   code={`
 export const SidePanelExample = (): React.ReactNode => {
   const [isOpen, setIsOpen] = React.useState(true);
@@ -191,6 +200,10 @@ The Side Panel Header Actions component is a container for action buttons that a
 
 The Side Panel Body is a container for the main content of the Side Panel. This is where the majority of the content will be placed.
 
+#### Side Panel Footer 
+
+The Side Panel Footer is a container for the Side Panel's overall actions, such as a [Chat Composer](/components/chat-composer) or [Button(s)](/components/button).
+
 ### Side Panel Push Content Wrapper
 
 The Side Panel Push Content Wrapper is a container for the main page content that is pushed to the side when the Side Panel is open. This wrapper is used to control the positioning of the main page content when the Side Panel is open. Ensuring that the content of this component is fully responsive is important to prevent the page from jumping or shifting when the Side Panel is opened or closed.