paris 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # paris
 
+## 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.0",
   "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'}
                 />
             ),
         } : {}}