docs: side panel (#3904)

twilio-labs · May 23, 2024 · a3b7520 · a3b7520
1 parent bb89382
commit a3b7520
Show file tree

Hide file tree

Showing 11 changed files with 407 additions and 10 deletions.
diff --git a/.changeset/yellow-geese-sneeze.md b/.changeset/yellow-geese-sneeze.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/side-panel": patch
+"@twilio-paste/core": patch
+---
+
+[Side Panel] Fix positioning of close button when no header actions are being used by adding justifyContent="space-between"
diff --git a/cypress/integration/sitemap-vrt/constants.ts b/cypress/integration/sitemap-vrt/constants.ts
@@ -186,6 +186,9 @@ export const SITEMAP = [
   "/components/sidebar-navigation/",
   "/components/sidebar-navigation/api",
   "/components/sidebar-navigation/changelog",
+  "/components/side-panel/",
+  "/components/side-panel/api",
+  "/components/side-panel/changelog",
   "/components/stack/",
   "/components/stack/api",
   "/components/stack/changelog",

diff --git a/packages/paste-core/components/side-panel/CHANGELOG.md b/packages/paste-core/components/side-panel/CHANGELOG.md
diff --git a/packages/paste-core/components/side-panel/src/SidePanelHeader.tsx b/packages/paste-core/components/side-panel/src/SidePanelHeader.tsx
@@ -56,6 +56,7 @@ const SidePanelHeader = React.forwardRef<HTMLDivElement, SidePanelHeaderProps>(
         display="flex"
         columnGap="space30"
         alignItems="center"
+        justifyContent="space-between"
         {...safelySpreadBoxProps(props)}
         ref={ref}
         element={element}

diff --git a/packages/paste-core/components/side-panel/stories/components/MessagingInsightsContent.tsx b/packages/paste-core/components/side-panel/stories/components/MessagingInsightsContent.tsx
@@ -2,7 +2,6 @@
 /* eslint-disable react/jsx-max-depth */
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable import/no-extraneous-dependencies */
-import { Badge } from "@twilio-paste/badge";
 import { Box } from "@twilio-paste/box";
 import { Button } from "@twilio-paste/button";
 import { Card } from "@twilio-paste/card";

diff --git a/packages/paste-core/components/side-panel/stories/components/SidebarWithContent.tsx b/packages/paste-core/components/side-panel/stories/components/SidebarWithContent.tsx
@@ -22,7 +22,7 @@ export const SidebarWithContent: React.FC<
   return (
     <Sidebar
       aria-label={id}
-      collapsed={false}
+      collapsed={true}
       variant="compact"
       sidebarNavigationSkipLinkID={sidebarNavigationSkipLinkID}
       topbarSkipLinkID={topbarSkipLinkID}
@@ -36,7 +36,7 @@ export const SidebarWithContent: React.FC<
       </SidebarHeader>
       <SidebarBody>
         <SidebarNavigation aria-label={id}>
-          <SidebarNavigationItem href="https://google.com" selected>
+          <SidebarNavigationItem href="#" selected>
             Explore products
           </SidebarNavigationItem>
         </SidebarNavigation>

diff --git a/packages/paste-core/components/side-panel/stories/index.stories.tsx b/packages/paste-core/components/side-panel/stories/index.stories.tsx
@@ -57,19 +57,78 @@ Default.parameters = {
 export const Basic = (): React.ReactNode => {
   const [isOpen, setIsOpen] = React.useState(true);
   const sidePanelId = useUID();
+  const topbarSkipLinkID = useUID();
+  const mainContentSkipLinkID = useUID();
   return (
-    <SidePanelContainer id={sidePanelId} isOpen={isOpen} setIsOpen={setIsOpen}>
-      <SidePanelWithContent />
-      <SidePanelPushContentWrapper>
-        <SidePanelButton variant="secondary">Toggle Side Panel</SidePanelButton>
-      </SidePanelPushContentWrapper>
-    </SidePanelContainer>
+    <>
+      <SidebarWithContent topbarSkipLinkID={topbarSkipLinkID} mainContentSkipLinkID={mainContentSkipLinkID} />
+      <SidebarPushContentWrapper collapsed={true} variant="compact">
+        <Topbar id={topbarSkipLinkID}> </Topbar>
+        <SidePanelContainer id={sidePanelId} isOpen={isOpen} setIsOpen={setIsOpen}>
+          <SidePanelWithContent />
+          <SidePanelPushContentWrapper>
+            <Box paddingTop="space40" paddingLeft="space40" paddingRight="space40">
+              <SidePanelButton variant="secondary">Toggle Side Panel</SidePanelButton>
+            </Box>
+          </SidePanelPushContentWrapper>
+        </SidePanelContainer>
+      </SidebarPushContentWrapper>
+    </>
   );
 };
 Basic.parameters = {
   padding: false,
 };
 
+export const I18n = (): React.ReactNode => {
+  const [isOpen, setIsOpen] = React.useState(true);
+
+  const topbarSkipLinkID = useUID();
+  const mainContentSkipLinkID = useUID();
+  const sidePanelId = useUID();
+  return (
+    <Box>
+      <SidebarWithContent topbarSkipLinkID={topbarSkipLinkID} mainContentSkipLinkID={mainContentSkipLinkID} />
+      <SidebarPushContentWrapper collapsed={true} variant="compact">
+        <Topbar id={topbarSkipLinkID}> </Topbar>
+        <SidePanelContainer
+          i18nCloseSidePanelTitle="cerrar panel lateral"
+          i18nOpenSidePanelTitle="abrir panel lateral"
+          isOpen={isOpen}
+          setIsOpen={setIsOpen}
+          id={sidePanelId}
+        >
+          <SidePanelPushContentWrapper>
+            <Box paddingTop="space40" paddingLeft="space40" paddingRight="space40">
+              <SidePanelButton variant="primary">Probar Panel Lateral</SidePanelButton>
+            </Box>
+          </SidePanelPushContentWrapper>
+          <SidePanel label="el panel lateral">
+            <SidePanelHeader>
+              <Heading as="h5" variant="heading30" marginBottom="space0">
+                Título
+              </Heading>
+            </SidePanelHeader>
+            <SidePanelBody>
+              <Box
+                width="100%"
+                height="100%"
+                backgroundColor="colorBackgroundDecorative10Weakest"
+                borderBottomLeftRadius="borderRadius50"
+                borderBottomRightRadius="borderRadius50"
+              />
+            </SidePanelBody>
+          </SidePanel>
+        </SidePanelContainer>
+      </SidebarPushContentWrapper>
+    </Box>
+  );
+};
+
+I18n.parameters = {
+  padding: false,
+};
+
 export const ContentDemo = (): React.ReactNode => {
   const [isOpen, setIsOpen] = React.useState(true);
 
@@ -148,7 +207,7 @@ export const Composed = (): React.ReactNode => {
     <Box>
       {/* Sidebar can be placed anywhere - position fixed */}
       <SidebarWithContent topbarSkipLinkID={topbarSkipLinkID} mainContentSkipLinkID={mainContentSkipLinkID} />
-      <SidebarPushContentWrapper collapsed={false} variant="compact">
+      <SidebarPushContentWrapper collapsed={true} variant="compact">
         <Topbar id={topbarSkipLinkID}> </Topbar>
         <SidePanelContainer isOpen={isOpen} setIsOpen={setIsOpen}>
           <SidePanelPushContentWrapper>

diff --git a/packages/paste-website/src/pages/components/side-modal/index.mdx b/packages/paste-website/src/pages/components/side-modal/index.mdx
@@ -100,6 +100,13 @@ Side Modal and non-modal dialogs follow these accessibility guidelines:
 - A Side Modal is a focus trap, and focus is placed inside it when it's shown.
 - A Side Modal must be triggered by an explicit user action, e.g. clicking a button.
 
+### Side Panel vs. Side Modal
+
+[Side Panel](/components/side-panel) and Side Modal are both used to display additional content on the side of the main page content. Side Panel is used for content that is not blocking and can be interacted with while the main page content is still visible. Side Panels are designed to remain open while the user completes other tasks in the main content of the page. Side Modals typically need to be closed before the user returns to their main task as the Modal overlays part of the page.
+
+Side Modals are a focus trap and can't be tabbed out of, while the content of Side Panels can be tabbed through and then tabbed out of to return to the main page content.
+
+
 ## Examples
 
 ### Basic Side Modal

diff --git a/packages/paste-website/src/pages/components/side-panel/api.mdx b/packages/paste-website/src/pages/components/side-panel/api.mdx
@@ -0,0 +1,84 @@
+export const meta = {
+  title: 'Side Panel - API',
+  package: '@twilio-paste/side-panel',
+  description:
+    'Side Panel is a container that pushes the main page content when open.',
+  slug: '/components/side-panel/api',
+};
+
+import Changelog from '@twilio-paste/side-panel/CHANGELOG.md'; // I don't know why this is needed but if you remove it the page fails to render
+import packageJson from '@twilio-paste/side-panel/package.json';
+
+import {SidebarCategoryRoutes} from '../../../constants';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData, getComponentApi} from '../../../utils/api';
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('Side Panel');
+  const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/side-panel');
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      componentApi,
+      mdxHeadings: [...mdxHeadings, ...componentApiTocData],
+      navigationData,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/side-panel',
+        storybookUrl: '/?path=/story/components-side-panel--default',
+      },
+    },
+  };
+};
+
+## Installation
+
+```bash
+yarn add @twilio-paste/side-panel - or - yarn add @twilio-paste/core
+```
+
+## Usage
+
+```jsx
+import {
+  SidePanelContainer,
+  SidePanel,
+  SidePanelHeader,
+  SidePanelHeaderActions,
+  SidePanelBody,
+  SidePanelPushContentWrapper,
+  SidePanelButton,
+} from '@twilio-paste/core/side-panel';
+
+const SideModalExample: React.FC = () => {
+  const [isOpen, setIsOpen] = React.useState(true);
+  return (
+    <SidePanelContainer isOpen={isOpen} setIsOpen={setIsOpen}>
+      <SidePanel>
+        <SidePanelHeader>
+          Heading goes here.
+          <SidePanelHeaderActions>
+            Actions go here.
+          </SidePanelHeaderActions>
+        </SidePanelHeader>
+        <SidePanelBody>
+          Side Panel content goes here.
+        </SidePanelBody>
+      </SidePanel>
+      <SidePanelPushContentWrapper>
+          <SidePanelButton variant="secondary">Toggle Side Panel</SidePanelButton>
+      </SidePanelPushContentWrapper>
+    </SidePanelContainer>
+  );
+};
+```
+
+## Props
+
+<PropsTable componentApi={props.componentApi} />
diff --git a/packages/paste-website/src/pages/components/side-panel/changelog.mdx b/packages/paste-website/src/pages/components/side-panel/changelog.mdx
@@ -0,0 +1,38 @@
+export const meta = {
+  title: 'Side Panel - Changelog',
+  package: '@twilio-paste/side-panel',
+  description:
+    'Side Panel is a container that pushes the main page content when open.',
+  slug: '/components/side-panel/changelog',
+};
+
+import Changelog from '@twilio-paste/side-panel/CHANGELOG.md';
+import packageJson from '@twilio-paste/side-panel/package.json';
+
+import {SidebarCategoryRoutes} from '../../../constants';
+import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
+import {getFeature, getNavigationData} from '../../../utils/api';
+
+export default ComponentPageLayout;
+
+export const getStaticProps = async () => {
+  const navigationData = await getNavigationData();
+  const feature = await getFeature('Side Panel');
+  return {
+    props: {
+      data: {
+        ...packageJson,
+        ...feature,
+      },
+      navigationData,
+      mdxHeadings,
+      pageHeaderData: {
+        categoryRoute: SidebarCategoryRoutes.COMPONENTS,
+        githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/side-panel',
+        storybookUrl: '/?path=/story/components-side-panel--default',
+      },
+    },
+  };
+};
+
+<Changelog />