add detail and right to accordions, update screenshots

src/__screenshot_tests__/accordion-screenshot-test.tsx

@@ -1,21 +1,17 @@
 import {openStoryPage, screen} from '../test-utils';
 
 test.each`
-    component            | inverse  | singleOpen
-    ${'Accordion'}       | ${false} | ${false}
-    ${'Accordion'}       | ${false} | ${true}
-    ${'Accordion'}       | ${true}  | ${false}
-    ${'Accordion'}       | ${true}  | ${true}
-    ${'Boxed accordion'} | ${false} | ${false}
-    ${'Boxed accordion'} | ${false} | ${true}
-    ${'Boxed accordion'} | ${true}  | ${false}
-    ${'Boxed accordion'} | ${true}  | ${true}
-`('$component. inverse($inverse) singleOpen($singleOpen)', async ({component, inverse, singleOpen}) => {
+    overInverse | singleOpen
+    ${false}    | ${false}
+    ${false}    | ${true}
+    ${true}     | ${false}
+    ${true}     | ${true}
+`('Accordion. overInverse($overInverse) singleOpen($singleOpen)', async ({overInverse, singleOpen}) => {
     await openStoryPage({
-        id: `components-accordions--${component.toLowerCase().replace(' ', '-')}-story`,
+        id: 'components-accordions--accordion-story',
         device: 'MOBILE_IOS',
         args: {
-            inverse,
+            overInverse,
             singleOpen,
         },
     });
@@ -32,3 +28,94 @@ test.each`
 
     expect(await accordion.screenshot()).toMatchImageSnapshot();
 });
+
+test.each`
+    inverse  | overInverse | singleOpen
+    ${false} | ${false}    | ${false}
+    ${false} | ${false}    | ${true}
+    ${false} | ${true}     | ${false}
+    ${false} | ${true}     | ${true}
+    ${true}  | ${false}    | ${false}
+    ${true}  | ${false}    | ${true}
+    ${true}  | ${true}     | ${false}
+    ${true}  | ${true}     | ${true}
+`(
+    'BoxedAccordion. inverse($inverse) overInverse($overInverse) singleOpen($singleOpen)',
+    async ({inverse, overInverse, singleOpen}) => {
+        await openStoryPage({
+            id: 'components-accordions--boxed-accordion-story',
+            device: 'MOBILE_IOS',
+            args: {
+                inverse,
+                overInverse,
+                singleOpen,
+            },
+        });
+
+        const accordion = await screen.findByTestId('accordion');
+
+        expect(await accordion.screenshot()).toMatchImageSnapshot();
+
+        await (await screen.findByTestId('accordion-item-1')).click();
+        await (await screen.findByTestId('accordion-item-1')).click();
+        await (await screen.findByTestId('accordion-item-2')).click();
+        await (await screen.findByTestId('accordion-item-4')).click();
+        await (await screen.findByTestId('accordion-item-6')).click();
+
+        expect(await accordion.screenshot()).toMatchImageSnapshot();
+    }
+);
+
+test.each`
+    detail      | right
+    ${''}       | ${false}
+    ${''}       | ${true}
+    ${'Detail'} | ${false}
+    ${'Detail'} | ${true}
+`('Accordion. detail($detail) right($right)', async ({detail, right}) => {
+    await openStoryPage({
+        id: 'components-accordions--accordion-story',
+        device: 'MOBILE_IOS',
+        args: {
+            detail,
+            right,
+        },
+    });
+
+    const accordion = await screen.findByTestId('accordion');
+
+    await (await screen.findByTestId('accordion-item-1')).click();
+    await (await screen.findByTestId('accordion-item-1')).click();
+    await (await screen.findByTestId('accordion-item-2')).click();
+    await (await screen.findByTestId('accordion-item-4')).click();
+    await (await screen.findByTestId('accordion-item-6')).click();
+
+    expect(await accordion.screenshot()).toMatchImageSnapshot();
+});
+
+test.each`
+    detail      | right
+    ${''}       | ${false}
+    ${''}       | ${true}
+    ${'Detail'} | ${false}
+    ${'Detail'} | ${true}
+`('BoxedAccordion. detail($detail) right($right)', async ({detail, right}) => {
+    await openStoryPage({
+        id: 'components-accordions--boxed-accordion-story',
+        device: 'MOBILE_IOS',
+        args: {
+            detail,
+            right,
+        },
+    });
+
+    const accordion = await screen.findByTestId('accordion');
+
+    await (await screen.findByTestId('accordion-item-1')).click();
+    await (await screen.findByTestId('accordion-item-1')).click();
+    await (await screen.findByTestId('accordion-item-2')).click();
+    await (await screen.findByTestId('accordion-item-4')).click();
+    await (await screen.findByTestId('accordion-item-6')).click();
+
+    expect(await accordion.screenshot()).toMatchImageSnapshot();
+});

src/__stories__/accordion-story.tsx

@@ -25,97 +25,103 @@ export default {
     parameters: {fullScreen: true},
 };
 
-type Args = {title: string; subtitle: string; singleOpen: boolean; inverse: boolean};
+type Args = {
+    title: string;
+    subtitle: string;
+    detail: string;
+    right: boolean;
+    singleOpen: boolean;
+    overInverse: boolean;
+};
+
+type BoxedArgs = Args & {inverse: boolean};
 
-const Template: StoryComponent<Args & {type?: 'boxed'}> = ({title, subtitle, singleOpen, inverse, type}) => {
+const Template: StoryComponent<BoxedArgs & {type?: 'boxed'}> = ({
+    title,
+    subtitle,
+    detail,
+    right,
+    singleOpen,
+    inverse,
+    overInverse,
+    type,
+}) => {
     const content = <Placeholder height={100} />;
 
     const AccordionComponent = type === 'boxed' ? BoxedAccordion : Accordion;
     const ItemComponent = type === 'boxed' ? BoxedAccordionItem : AccordionItem;
 
+    const getAccordionItemContentProps = () => {
+        return {
+            title,
+            subtitle,
+            content,
+            detail,
+            right: right ? (
+                <div style={{display: 'flex', alignItems: 'center', height: '100%'}}>
+                    <div style={{width: 32, height: 32, borderRadius: '50%', background: 'pink'}} />
+                </div>
+            ) : undefined,
+            ...(type === 'boxed' && {isInverse: inverse}),
+        };
+    };
+
     return (
-        <ResponsiveLayout fullWidth isInverse={inverse}>
+        <ResponsiveLayout fullWidth variant={overInverse ? 'inverse' : 'default'}>
             <Box padding={16}>
                 <AccordionComponent singleOpen={singleOpen} dataAttributes={{testid: 'accordion'}}>
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
-                        {...(type === 'boxed' && {isInverse: inverse})}
+                        {...getAccordionItemContentProps()}
                         dataAttributes={{testid: 'accordion-item-1'}}
                     />
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<IconThumbUpFilled size={24} />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-2'}}
                     />
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={
                             <Circle backgroundColor={skinVars.colors.brandLow} size={40}>
                                 <IconMobileDeviceRegular color={skinVars.colors.brand} />
                             </Circle>
                         }
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-3'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Circle size={40} backgroundImage={laptopImg} />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-4'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Image src={usingVrImg} height={80} aspectRatio="16:9" />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-5'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Image src={personPortraitImg} width={80} aspectRatio="7:10" />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-6'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Image src={touchImg} width={80} aspectRatio="1:1" />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-7'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Avatar size={40} src={avatarImg} />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-8'}}
                     />
 
                     <ItemComponent
-                        title={title}
-                        subtitle={subtitle}
-                        content={content}
+                        {...getAccordionItemContentProps()}
                         asset={<Avatar size={40} initials="MS" />}
-                        {...(type === 'boxed' && {isInverse: inverse})}
                         dataAttributes={{testid: 'accordion-item-9'}}
                     />
                 </AccordionComponent>
@@ -127,14 +133,16 @@ const Template: StoryComponent<Args & {type?: 'boxed'}> = ({title, subtitle, sin
 const defaultArgs = {
     title: 'Title',
     subtitle: 'Subtitle',
+    detail: '',
+    right: false,
     singleOpen: false,
-    inverse: false,
+    overInverse: false,
 };
 
-export const AccordionStory: StoryComponent<Args> = (args) => <Template {...args} />;
+export const AccordionStory: StoryComponent<Args> = (args) => <Template inverse={false} {...args} />;
 AccordionStory.storyName = 'Accordion';
 AccordionStory.args = defaultArgs;
 
-export const BoxedAccordionStory: StoryComponent<Args> = (args) => <Template type="boxed" {...args} />;
+export const BoxedAccordionStory: StoryComponent<BoxedArgs> = (args) => <Template type="boxed" {...args} />;
 BoxedAccordionStory.storyName = 'BoxedAccordion';
-BoxedAccordionStory.args = defaultArgs;
+BoxedAccordionStory.args = {...defaultArgs, inverse: false};

src/accordion.css.ts

@@ -52,6 +52,10 @@ export const touchableBackgroundInverse = style({
     },
 });
 
+export const rightContentContainer = style({
+    height: '100%',
+});
+
 export const chevronContainer = style({
     height: '100%',
     display: 'flex',

src/accordion.tsx

@@ -14,6 +14,7 @@ import {Boxed} from './boxed';
 import {useIsInverseOrMediaVariant} from './theme-variant-context';
 import {CSSTransition} from 'react-transition-group';
 import {isRunningAcceptanceTest} from './utils/platform';
+import Inline from './inline';
 
 import type {ExclusifyUnion} from './utils/utility-types';
 import type {DataAttributes, TrackingEvent} from './utils/types';
@@ -43,6 +44,8 @@ interface AccordionItemContentProps {
     dataAttributes?: DataAttributes;
     trackingEvent?: TrackingEvent | ReadonlyArray<TrackingEvent>;
     role?: string;
+    detail?: string;
+    right?: React.ReactNode;
 }
 
 const useAccordionState = ({
@@ -119,7 +122,7 @@ const getAccordionItemIndex = (element: Element | null) => {
 };
 
 const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemContentProps>(
-    ({content, dataAttributes, trackingEvent, ...props}, ref) => {
+    ({content, dataAttributes, trackingEvent, right, ...props}, ref) => {
         const panelContainerRef = React.useRef<HTMLDivElement | null>(null);
         const itemRef = React.useRef<HTMLDivElement | null>(null);
         const {index, toggle} = useAccordionContext();
@@ -152,23 +155,32 @@ const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemCon
                     <Box paddingX={16}>
                         <HeaderContent
                             labelId={labelId}
-                            {...props}
-                            right={
-                                <div className={styles.chevronContainer}>
-                                    <IconChevron
-                                        size={24}
-                                        transitionDuration={ACCORDION_TRANSITION_DURATION_IN_MS}
-                                        direction={isOpen ? 'up' : 'down'}
-                                        color={
-                                            isInverse
-                                                ? skinVars.colors.inverse
-                                                : isOpen
-                                                  ? skinVars.colors.neutralHigh
-                                                  : skinVars.colors.neutralMedium
-                                        }
-                                    />
-                                </div>
-                            }
+                            {...{
+                                ...props,
+                                right: ({centerY}) => (
+                                    <Inline
+                                        space={4}
+                                        alignItems={centerY ? 'center' : undefined}
+                                        className={styles.rightContentContainer}
+                                    >
+                                        {right}
+                                        <div className={styles.chevronContainer}>
+                                            <IconChevron
+                                                size={24}
+                                                transitionDuration={ACCORDION_TRANSITION_DURATION_IN_MS}
+                                                direction={isOpen ? 'up' : 'down'}
+                                                color={
+                                                    isInverse
+                                                        ? skinVars.colors.inverse
+                                                        : isOpen
+                                                          ? skinVars.colors.neutralHigh
+                                                          : skinVars.colors.neutralMedium
+                                                }
+                                            />
+                                        </div>
+                                    </Inline>
+                                ),
+                            }}
                         />
                     </Box>
                 </BaseTouchable>