paris 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # paris
 
+## 0.8.1
+
+### Patch Changes
+
+- c3a5648: Allow for title in paginated drawer
+- 963e618: Pagination: add `reset` function to reset the history state
+
 ## 0.8.0
 
 ### Minor Changes

package/package.json

@@ -2,7 +2,7 @@
   "name": "paris",
   "author": "Sanil Chawla <sanil@slingshot.fm> (https://sanil.co)",
   "description": "Paris is Slingshot's React design system. It's a collection of reusable components, design tokens, and guidelines that help us build consistent, accessible, and performant user interfaces.",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/drawer/Drawer.module.scss

@@ -292,11 +292,11 @@ $panelAnimationDelay: var(--pte-animations-duration-fast);
     }
 }
 
-.paginationButtons {
+.paginationTitle {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 8px;
+    gap: 12px;
 }
 
 .enter {

package/src/stories/drawer/Drawer.stories.tsx

@@ -42,7 +42,6 @@ export const Default: Story = {
 
 export const Paginated: Story = {
     args: {
-        title: 'Creation process',
         children: [],
     },
     render: (args) => {
@@ -50,6 +49,12 @@ export const Paginated: Story = {
         const pages = ['step1', 'step2', 'step3'] as const;
         const pagination = usePagination<typeof pages>('step1');
 
+        const currentPageTitle = {
+            step1: 'Step 1',
+            step2: 'Step 2',
+            step3: 'Step 3',
+        }[pagination.currentPage];
+
         return (
             <>
                 <Button
@@ -62,6 +67,7 @@ export const Paginated: Story = {
                     isOpen={isOpen}
                     onClose={setIsOpen}
                     pagination={pagination}
+                    title={currentPageTitle}
                 >
                     <div key="step1" style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
                         Step 1: Enter your name

package/src/stories/drawer/Drawer.tsx

@@ -273,7 +273,7 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                     >
                                         <div
                                             className={clsx(
-                                                styles.paginationButtons,
+                                                styles.paginationTitle,
                                             )}
                                         >
                                             <Button
@@ -306,6 +306,16 @@ export const Drawer = <T extends string[] | readonly string[] = string[]>({
                                             >
                                                 Go to next page in this modal
                                             </Button>
+                                            <VisuallyHidden
+                                                // Hide when requested, or when pagination is enabled (the title isn't relevant to any specific page).
+                                                when={hideTitle}
+                                            >
+                                                <Dialog.Title as="h2" className={styles.titleTextContainer}>
+                                                    <TextWhenString kind="paragraphSmall" weight="medium">
+                                                        {title}
+                                                    </TextWhenString>
+                                                </Dialog.Title>
+                                            </VisuallyHidden>
                                         </div>
                                         <Button
                                             kind="tertiary"

package/src/stories/pagination/usePagination.ts

@@ -40,6 +40,11 @@ export type PaginationState<T extends string[] | readonly string[] = string[]> =
      * The page history.
      */
     history: T[number][],
+
+    /**
+     * Clear the page history and reset to the initial page.
+     */
+    reset: () => void,
 };
 
 /**
@@ -94,6 +99,11 @@ export const usePagination = <T extends string[] | readonly string[] = string[]>
         }
     };
 
+    const reset = (): void => {
+        setCurrentPage(initialPage);
+        setHistory([initialPage]);
+    };
+
     return {
         currentPage,
         open,
@@ -101,6 +111,7 @@ export const usePagination = <T extends string[] | readonly string[] = string[]>
         back,
         canGoForward,
         forward,
+        reset,
         history,
     } as PaginationState<T>;
 };