paris 0.7.0 → 0.8.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # 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
+
+- 9192ce2: Button: rename `hrefTarget` prop to `hreftarget` for React compatibility
+
+### Patch Changes
+
+- 30bb138: Accordion: allow uncontrolled state management
+
 ## 0.7.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.7.0",
+  "version": "0.8.1",
   "homepage": "https://paris.slingshot.fm",
   "license": "MIT",
   "repository": {

package/src/stories/accordion/Accordion.tsx

@@ -10,6 +10,10 @@ import { TextWhenString } from '../utility';
 export type AccordionProps = {
     /** The title of the Accordion. */
     title?: ReactNode;
+    /** Whether the Accordion is open. If provided, the Accordion will be a controlled component. */
+    isOpen?: boolean;
+    /** A handler for when the Accordion state changes. */
+    onOpenChange?: (open: boolean) => void | Promise<void>;
     /** The collapsible contents of the Accordion. */
     children?: ReactNode;
 };
@@ -28,9 +32,11 @@ export type AccordionProps = {
  */
 export const Accordion: FC<AccordionProps> = ({
     title,
+    isOpen,
+    onOpenChange,
     children,
 }) => {
-    const [open, setOpen] = useState(false);
+    const [open, setOpen] = useState(isOpen ?? false);
 
     return (
         <div
@@ -43,6 +49,7 @@ export const Accordion: FC<AccordionProps> = ({
                     if (e.key === 'Enter' || e.key === ' ') {
                         e.preventDefault();
                         setOpen((o) => !o);
+                        onOpenChange?.(!open);
                     }
                 }}
                 role="button"

package/src/stories/button/Button.tsx

@@ -98,7 +98,7 @@ export type ButtonProps = {
     /**
      * Optionally, the target of the anchor element can be specified (defaults to `_self`).
      */
-    hrefTarget?: HTMLAttributeAnchorTarget;
+    hreftarget?: HTMLAttributeAnchorTarget;
     /**
      * The contents of the Button.
      *
@@ -163,8 +163,8 @@ export const Button: FC<ButtonProps> = ({
                 <a
                     {...properties}
                     href={href}
-                    target={props.hrefTarget ?? '_self'}
-                    rel={props.hrefTarget === '_self' ? undefined : 'noreferrer'}
+                    target={props.hreftarget ?? '_self'}
+                    rel={props.hreftarget === '_self' ? undefined : 'noreferrer'}
                 />
             ),
         } : {}}

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>;
 };