feat: open prop expandable card (#5431)

Author: lisalupi

.changeset/real-suns-repair.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`ExpandableCard`: new prop "open" (uncontrolled version of prop "expanded)

packages/ui/src/components/ExpandableCard/__stories__/Open.stories.tsx

@@ -0,0 +1,14 @@
+import { Template } from './Template.stories'
+
+export const Open = Template.bind({})
+
+Open.args = { ...Template.args, header: 'I am open', open: true }
+
+Open.parameters = {
+  docs: {
+    description: {
+      story:
+        'For an unconctrolled ExpandableCard open by default, use prop `open`. Otherwise use prop `expanded`.',
+    },
+  },
+}

packages/ui/src/components/ExpandableCard/__stories__/index.stories.tsx

@@ -13,6 +13,7 @@ export { Playground } from './Playground.stories'
 export { Size } from './Size.stories'
 export { Header } from './Header.stories'
 export { Disabled } from './Disabled.stories'
+export { Open } from './Open.stories'
 export { Controlled } from './Controlled.stories'
 export { Name } from './Name.stories'
 export { Draggable } from './Draggable.stories'

packages/ui/src/components/ExpandableCard/__tests__/index.test.tsx

@@ -122,4 +122,19 @@ describe('ExpandableCard', () => {
       expect(onToggleExpand).toHaveBeenCalled()
     })
   })
+
+  test('works properly when uncontrolled and open', async () => {
+    renderWithTheme(
+      <ExpandableCard data-testid="expandablecard" header="Title" open>
+        Content
+      </ExpandableCard>,
+    )
+
+    const title = screen.getByText('Title')
+    const content = screen.getByText('Content')
+    expect(content).toBeVisible()
+
+    await userEvent.click(title)
+    expect(content).not.toBeVisible()
+  })
 })

packages/ui/src/components/ExpandableCard/index.tsx

@@ -3,7 +3,13 @@
 import { useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
 import { ArrowDownIcon, DragIcon } from '@ultraviolet/icons'
-import type { DragEvent, ForwardedRef, KeyboardEvent, ReactNode } from 'react'
+import type {
+  DetailsHTMLAttributes,
+  DragEvent,
+  ForwardedRef,
+  KeyboardEvent,
+  ReactNode,
+} from 'react'
 import { forwardRef, useCallback, useRef, useState } from 'react'
 import type { XOR } from '../../types'
 import { Stack } from '../Stack'
@@ -150,6 +156,8 @@ type CommonProps = {
   disabled?: boolean
   'data-testid'?: string
   className?: string
+  /** Uncontrolled but open by default */
+  open?: DetailsHTMLAttributes<HTMLDetailsElement>['open']
 } & DraggableProps
 
 type ExpandableCardProps = XOR<
@@ -173,6 +181,7 @@ const BaseExpandableCard = forwardRef(
       index,
       onKeyDown,
       'data-testid': dataTestId,
+      open,
     }: ExpandableCardProps,
     ref: ForwardedRef<HTMLDetailsElement>,
   ) => {
@@ -291,7 +300,7 @@ const BaseExpandableCard = forwardRef(
           data-testid={dataTestId}
           key={clicking ? 'closed' : 'open'}
           name={name}
-          open={expanded}
+          open={open ?? expanded}
           ref={ref}
           tabIndex={disabled ? -1 : undefined}
         >