diff --git a/app/component-library/components/Accordions/Accordion/Accordion.constants.ts b/app/component-library/components/Accordions/Accordion/Accordion.constants.ts index c3ced8ea155..2eac9a3e51b 100644 --- a/app/component-library/components/Accordions/Accordion/Accordion.constants.ts +++ b/app/component-library/components/Accordions/Accordion/Accordion.constants.ts @@ -1,5 +1,14 @@ // eslint-disable-next-line import/prefer-default-export -export const ACCORDION_EXPAND_TRANSITION_DURATION = 150; +// External dependencies. +import { AnimationDuration } from '../../../constants/animation.constants'; +import { SAMPLE_ACCORDIONHEADER_TITLE } from './foundation/AccordionHeader/AccordionHeader.constants'; -export const ACCORDION_TEST_ID = 'accordion'; -export const ACCORDION_CONTENT_TEST_ID = 'accordion-content'; +// Test IDs +export const TESTID_ACCORDION = 'accordion'; +export const TESTID_ACCORDION_CONTENT = 'accordion-content'; + +// Defaults +export const DEFAULT_ACCORDION_EXPANDDURATION = AnimationDuration.Promptly; + +// Samples +export const SAMPLE_ACCORDION_TITLE = SAMPLE_ACCORDIONHEADER_TITLE; diff --git a/app/component-library/components/Accordions/Accordion/Accordion.stories.tsx b/app/component-library/components/Accordions/Accordion/Accordion.stories.tsx index bcacf095e42..5ab4f3e08e4 100644 --- a/app/component-library/components/Accordions/Accordion/Accordion.stories.tsx +++ b/app/component-library/components/Accordions/Accordion/Accordion.stories.tsx @@ -4,31 +4,38 @@ import React from 'react'; import { View } from 'react-native'; import { storiesOf } from '@storybook/react-native'; -import { boolean, text } from '@storybook/addon-knobs'; // External dependencies. import { mockTheme } from '../../../../util/theme'; import Text, { TextVariant } from '../../Texts/Text'; +import { + getAccordionHeaderStoryProps, + AccordionHeaderStory, +} from './foundation/AccordionHeader/AccordionHeader.stories'; // Internal dependencies. import Accordion from './Accordion'; -import { TEST_ACCORDION_HEADER_TITLE } from './foundation/AccordionHeader/AccordionHeader.constants'; +import { AccordionProps } from './Accordion.types'; -storiesOf('Component Library / Accordion', module).add('Default', () => { - const groupId = 'Props'; - const titleText = text('title', TEST_ACCORDION_HEADER_TITLE, groupId); - const isExpanded = boolean('isExpanded', false, groupId); - return ( - - - {'Wrapped Content'} - - - ); +export const getAccordionStoryProps = (): AccordionProps => ({ + ...getAccordionHeaderStoryProps(), + children: ( + + {'Wrapped Content'} + + ), }); + +const AccordionStory = () => ; + +storiesOf('Component Library / Accordions', module) + .add('Accordion', AccordionStory) + .add('foundation / AccordionHeader', AccordionHeaderStory); + +export default AccordionStory; diff --git a/app/component-library/components/Accordions/Accordion/Accordion.test.tsx b/app/component-library/components/Accordions/Accordion/Accordion.test.tsx index d41fbd7c347..aa824db627b 100644 --- a/app/component-library/components/Accordions/Accordion/Accordion.test.tsx +++ b/app/component-library/components/Accordions/Accordion/Accordion.test.tsx @@ -3,20 +3,18 @@ import React from 'react'; import { shallow } from 'enzyme'; import { View } from 'react-native'; -// External dependencies. -import { TEST_ACCORDION_HEADER_TITLE } from './foundation/AccordionHeader/AccordionHeader.constants'; - // Internal dependencies. import Accordion from './Accordion'; import { - ACCORDION_TEST_ID, - ACCORDION_CONTENT_TEST_ID, + TESTID_ACCORDION, + TESTID_ACCORDION_CONTENT, + SAMPLE_ACCORDION_TITLE, } from './Accordion.constants'; describe('Accordion - Snapshot', () => { it('should render default settings correctly', () => { const wrapper = shallow( - + , ); @@ -24,7 +22,7 @@ describe('Accordion - Snapshot', () => { }); it('should render a proper expanded state', () => { const wrapper = shallow( - + , ); @@ -35,36 +33,36 @@ describe('Accordion - Snapshot', () => { describe('Accordion', () => { it('should render Accordion', () => { const wrapper = shallow( - + , ); const AccordionComponent = wrapper.findWhere( - (node) => node.prop('testID') === ACCORDION_TEST_ID, + (node) => node.prop('testID') === TESTID_ACCORDION, ); expect(AccordionComponent.exists()).toBe(true); }); it('should render Accordion content if isExpanded = true', () => { const wrapper = shallow( - + , ); const AccordionContentComponent = wrapper.findWhere( - (node) => node.prop('testID') === ACCORDION_CONTENT_TEST_ID, + (node) => node.prop('testID') === TESTID_ACCORDION_CONTENT, ); expect(AccordionContentComponent.exists()).toBe(true); }); it('should NOT render Accordion content if isExpanded = false', () => { const wrapper = shallow( - + , ); const AccordionContentComponent = wrapper.findWhere( - (node) => node.prop('testID') === ACCORDION_CONTENT_TEST_ID, + (node) => node.prop('testID') === TESTID_ACCORDION_CONTENT, ); expect(AccordionContentComponent.exists()).toBe(false); }); diff --git a/app/component-library/components/Accordions/Accordion/Accordion.tsx b/app/component-library/components/Accordions/Accordion/Accordion.tsx index 2cb9c67721f..ad89a62359b 100644 --- a/app/component-library/components/Accordions/Accordion/Accordion.tsx +++ b/app/component-library/components/Accordions/Accordion/Accordion.tsx @@ -2,7 +2,6 @@ // Third party dependencies. import React, { useState } from 'react'; -import { View } from 'react-native'; import Animated from 'react-native-reanimated'; // External dependencies. @@ -13,9 +12,9 @@ import AccordionHeader from './foundation/AccordionHeader'; import styleSheet from './Accordion.styles'; import { AccordionProps } from './Accordion.types'; import { - ACCORDION_TEST_ID, - ACCORDION_CONTENT_TEST_ID, - // ACCORDION_EXPAND_TRANSITION_DURATION, + TESTID_ACCORDION, + TESTID_ACCORDION_CONTENT, + // DEFAULT_ACCORDION_EXPANDDURATION, } from './Accordion.constants'; const Accordion: React.FC = ({ @@ -33,11 +32,11 @@ const Accordion: React.FC = ({ // // // // // ); @@ -50,21 +49,24 @@ const Accordion: React.FC = ({ }; return ( - + <> {expanded && ( {children} )} - + ); }; diff --git a/app/component-library/components/Accordions/Accordion/Accordion.types.ts b/app/component-library/components/Accordions/Accordion/Accordion.types.ts index d05f4ebbc11..6222d1b7d9e 100644 --- a/app/component-library/components/Accordions/Accordion/Accordion.types.ts +++ b/app/component-library/components/Accordions/Accordion/Accordion.types.ts @@ -1,13 +1,10 @@ -// Third party dependencies. -import { ViewProps } from 'react-native'; - // External dependencies. import { AccordionHeaderProps } from './foundation/AccordionHeader/AccordionHeader.types'; /** * Accordion component props. */ -export interface AccordionProps extends ViewProps, AccordionHeaderProps { +export interface AccordionProps extends AccordionHeaderProps { /** * Content to be displayed/hidden below the accordion header. */ diff --git a/app/component-library/components/Accordions/Accordion/README.md b/app/component-library/components/Accordions/Accordion/README.md index 3052aaa704a..1b59c51fbd9 100644 --- a/app/component-library/components/Accordions/Accordion/README.md +++ b/app/component-library/components/Accordions/Accordion/README.md @@ -38,6 +38,14 @@ Optional Function to trigger when pressing the Accordion Header. | :-------------------------------------------------- | :------------------------------------------------------ | | Function | Yes | +### `horizontalAlignment` + +Optional prop to control the horizontal alignment of the AccordionHeader. + +| TYPE | REQUIRED | DEFAULT | +| :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- | +| AccordionHeaderHorizontalAlignment | No | AccordionHeaderHorizontalAlignment.Center | + ## Usage ```javascript @@ -47,7 +55,8 @@ import Accordion from 'app/component-library/components/Accordions/Accordion/Acc + onPress={ONPRESS_HANDLER} + horizontalAlignment={AccordionHeaderHorizontalAlignment.Center}> ; ``` diff --git a/app/component-library/components/Accordions/Accordion/__snapshots__/Accordion.test.tsx.snap b/app/component-library/components/Accordions/Accordion/__snapshots__/Accordion.test.tsx.snap index 7992173ec13..5974f5a2515 100644 --- a/app/component-library/components/Accordions/Accordion/__snapshots__/Accordion.test.tsx.snap +++ b/app/component-library/components/Accordions/Accordion/__snapshots__/Accordion.test.tsx.snap @@ -1,13 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Accordion - Snapshot should render a proper expanded state 1`] = ` - + - + `; exports[`Accordion - Snapshot should render default settings correctly 1`] = ` - + - + `; diff --git a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.constants.ts b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.constants.ts index 84994613883..5882dd93b76 100644 --- a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.constants.ts +++ b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.constants.ts @@ -1,9 +1,29 @@ +/* eslint-disable no-console */ // eslint-disable-next-line import/prefer-default-export -export const TEST_ACCORDION_HEADER_TITLE = 'Sample Accordion Header Title'; +// Internal dependencies. +import { + AccordionHeaderHorizontalAlignment, + AccordionHeaderProps, +} from './AccordionHeader.types'; -export const ACCORDION_HEADER_TEST_ID = 'accordion-header'; -export const ACCORDION_HEADER_TITLE_TEST_ID = 'accordion-header-title'; -export const ACCORDION_HEADER_ARROW_ICON_TEST_ID = - 'accordion-header-arrow-icon'; -export const ACCORDION_HEADER_ARROW_ICON_ANIMATION_TEST_ID = - 'accordion-header-arrow-icon-animation'; +// Defaults +export const DEFAULT_ACCORDIONHEADER_HORIZONTALALIGNMENT = + AccordionHeaderHorizontalAlignment.Center; + +// Test IDs +export const TESTID_ACCORDIONHEADER = 'accordionheader'; +export const TESTID_ACCORDIONHEADER_TITLE = 'accordionheader-title'; +export const TESTID_ACCORDIONHEADER_ARROWICON = 'accordionheader-arrow-icon'; +export const TESTID_ACCORDIONHEADER_ARROWICON_ANIMATION = + 'accordionheader-arrow-icon-animation'; + +// Sample consts +export const SAMPLE_ACCORDIONHEADER_TITLE = 'Sample Accordion Header Title'; +export const SAMPLE_ACCORDIONHEADER_PROPS: AccordionHeaderProps = { + title: SAMPLE_ACCORDIONHEADER_TITLE, + onPress: () => { + console.log('Accordion Header clicked'); + }, + isExpanded: false, + horizontalAlignment: DEFAULT_ACCORDIONHEADER_HORIZONTALALIGNMENT, +}; diff --git a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.stories.tsx b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.stories.tsx index ba5d50a3cad..9d49d066aab 100644 --- a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.stories.tsx +++ b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.stories.tsx @@ -2,17 +2,44 @@ // Third party dependencies. import React from 'react'; -import { storiesOf } from '@storybook/react-native'; -import { boolean, text } from '@storybook/addon-knobs'; +import { boolean, text, select } from '@storybook/addon-knobs'; + +// External dependencies. +import { storybookPropsGroupID } from '../../../../../constants/storybook.constants'; // Internal dependencies. import AccordionHeader from './AccordionHeader'; -import { TEST_ACCORDION_HEADER_TITLE } from './AccordionHeader.constants'; +import { + SAMPLE_ACCORDIONHEADER_TITLE, + DEFAULT_ACCORDIONHEADER_HORIZONTALALIGNMENT, +} from './AccordionHeader.constants'; +import { + AccordionHeaderHorizontalAlignment, + AccordionHeaderProps, +} from './AccordionHeader.types'; + +export const getAccordionHeaderStoryProps = (): AccordionHeaderProps => { + const titleText = text( + 'title', + SAMPLE_ACCORDIONHEADER_TITLE, + storybookPropsGroupID, + ); + const isExpanded = boolean('isExpanded', false, storybookPropsGroupID); + const horizontalAlignmentSelector = select( + 'horizontalAlignment', + AccordionHeaderHorizontalAlignment, + DEFAULT_ACCORDIONHEADER_HORIZONTALALIGNMENT, + storybookPropsGroupID, + ); + return { + title: titleText, + isExpanded, + horizontalAlignment: horizontalAlignmentSelector, + }; +}; -storiesOf('Component Library / AccordionHeader', module).add('Default', () => { - const groupId = 'Props'; - const titleText = text('title', TEST_ACCORDION_HEADER_TITLE, groupId); - const isExpanded = boolean('isExpanded', false, groupId); +export const AccordionHeaderStory = () => ( + +); - return ; -}); +export default AccordionHeaderStory; diff --git a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.styles.ts b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.styles.ts index a916bbfa65b..288b86897ca 100644 --- a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.styles.ts +++ b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.styles.ts @@ -5,7 +5,10 @@ import { StyleSheet, ViewStyle } from 'react-native'; import { Theme } from '../../../../../../util/theme/models'; // Internal dependencies. -import { AccordionHeaderStyleSheetVars } from './AccordionHeader.types'; +import { + AccordionHeaderStyleSheetVars, + AccordionHeaderHorizontalAlignment, +} from './AccordionHeader.types'; /** * Style sheet function for AccordionHeader component. @@ -21,15 +24,28 @@ const styleSheet = (params: { }) => { const { vars, theme } = params; const { colors } = theme; - const { style } = vars; + const { style, horizontalAlignment } = vars; + let justifyContent; + switch (horizontalAlignment) { + case AccordionHeaderHorizontalAlignment.Start: + justifyContent = 'flex-start'; + break; + case AccordionHeaderHorizontalAlignment.End: + justifyContent = 'flex-end'; + break; + case AccordionHeaderHorizontalAlignment.Center: + default: + justifyContent = 'center'; + break; + } + return StyleSheet.create({ base: Object.assign( { height: 24, flexDirection: 'row', - justifyContent: 'center', + justifyContent, alignItems: 'center', - backgroundColor: colors.background.default, } as ViewStyle, style, ) as ViewStyle, diff --git a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.test.tsx b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.test.tsx index cb266107b59..7f4bd2b8e51 100644 --- a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.test.tsx +++ b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.test.tsx @@ -8,22 +8,22 @@ import { IconName } from '../../../../Icons/Icon'; // Internal dependencies. import AccordionHeader from './AccordionHeader'; import { - ACCORDION_HEADER_TEST_ID, - ACCORDION_HEADER_TITLE_TEST_ID, - ACCORDION_HEADER_ARROW_ICON_TEST_ID, - TEST_ACCORDION_HEADER_TITLE, + TESTID_ACCORDIONHEADER, + TESTID_ACCORDIONHEADER_TITLE, + TESTID_ACCORDIONHEADER_ARROWICON, + SAMPLE_ACCORDIONHEADER_TITLE, } from './AccordionHeader.constants'; describe('AccordionHeader - Snapshot', () => { it('should render default settings correctly', () => { const wrapper = shallow( - , + , ); expect(wrapper).toMatchSnapshot(); }); it('should render a rotated down Arrow if isExpanded is true', () => { const wrapper = shallow( - , + , ); expect(wrapper).toMatchSnapshot(); }); @@ -32,28 +32,28 @@ describe('AccordionHeader - Snapshot', () => { describe('AccordionHeader', () => { it('should render AccordionHeader', () => { const wrapper = shallow( - , + , ); const accordionHeaderComponent = wrapper.findWhere( - (node) => node.prop('testID') === ACCORDION_HEADER_TEST_ID, + (node) => node.prop('testID') === TESTID_ACCORDIONHEADER, ); expect(accordionHeaderComponent.exists()).toBe(true); }); it('should render the given title', () => { const wrapper = shallow( - , + , ); const titleElement = wrapper.findWhere( - (node) => node.prop('testID') === ACCORDION_HEADER_TITLE_TEST_ID, + (node) => node.prop('testID') === TESTID_ACCORDIONHEADER_TITLE, ); - expect(titleElement.props().children).toBe(TEST_ACCORDION_HEADER_TITLE); + expect(titleElement.props().children).toBe(SAMPLE_ACCORDIONHEADER_TITLE); }); it('should render the proper arrow up icon', () => { const wrapper = shallow( - , + , ); const iconElement = wrapper.findWhere( - (node) => node.prop('testID') === ACCORDION_HEADER_ARROW_ICON_TEST_ID, + (node) => node.prop('testID') === TESTID_ACCORDIONHEADER_ARROWICON, ); expect(iconElement.props().name).toBe(IconName.ArrowUp); }); diff --git a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.tsx b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.tsx index b68c01de7b4..52ac32b01a5 100644 --- a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.tsx +++ b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.tsx @@ -20,10 +20,11 @@ import { ACCORDION_EXPAND_TRANSITION_DURATION } from '../../Accordion.constants' import styleSheet from './AccordionHeader.styles'; import { AccordionHeaderProps } from './AccordionHeader.types'; import { - ACCORDION_HEADER_TEST_ID, - ACCORDION_HEADER_TITLE_TEST_ID, - ACCORDION_HEADER_ARROW_ICON_TEST_ID, - ACCORDION_HEADER_ARROW_ICON_ANIMATION_TEST_ID, + TESTID_ACCORDIONHEADER, + TESTID_ACCORDIONHEADER_TITLE, + TESTID_ACCORDIONHEADER_ARROWICON, + TESTID_ACCORDIONHEADER_ARROWICON_ANIMATION, + DEFAULT_ACCORDIONHEADER_HORIZONTALALIGNMENT, } from './AccordionHeader.constants'; const AccordionHeader = ({ @@ -31,8 +32,9 @@ const AccordionHeader = ({ title, isExpanded = false, onPress, + horizontalAlignment = DEFAULT_ACCORDIONHEADER_HORIZONTALALIGNMENT, }: AccordionHeaderProps) => { - const { styles } = useStyles(styleSheet, { style }); + const { styles } = useStyles(styleSheet, { style, horizontalAlignment }); const rotation = useSharedValue(isExpanded ? 180 : 0); const animatedStyles = useAnimatedStyle( () => ({ @@ -58,24 +60,24 @@ const AccordionHeader = ({ activeOpacity={0.5} onPress={onHeaderPressed} style={styles.base} - testID={ACCORDION_HEADER_TEST_ID} + testID={TESTID_ACCORDIONHEADER} > {title} diff --git a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.types.ts b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.types.ts index e1af8782d0b..2f99d44f711 100644 --- a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.types.ts +++ b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/AccordionHeader.types.ts @@ -1,6 +1,15 @@ // Third party dependencies. import { TouchableOpacityProps } from 'react-native'; +/** + * AccordionHeader Alignment options. + */ +export enum AccordionHeaderHorizontalAlignment { + Start = 'Start', + Center = 'Center', + End = 'End', +} + /** * AccordionHeader component props. */ @@ -18,9 +27,19 @@ export interface AccordionHeaderProps extends TouchableOpacityProps { * @default false */ isExpanded?: boolean; + /** + * Optional prop to control the horizontal alignment of the AccordionHeader. + * @default AccordionHeaderHorizontalAlignment.Center + */ + horizontalAlignment?: AccordionHeaderHorizontalAlignment; } /** * Style sheet input parameters. */ -export type AccordionHeaderStyleSheetVars = Pick; +export type AccordionHeaderStyleSheetVars = Pick< + AccordionHeaderProps, + 'style' +> & { + horizontalAlignment: AccordionHeaderHorizontalAlignment; +}; diff --git a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/README.md b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/README.md index f21f1c6c118..e0ba8781025 100644 --- a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/README.md +++ b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/README.md @@ -30,6 +30,14 @@ Optional function to trigger when pressing the Accordion Header. | :-------------------------------------------------- | :------------------------------------------------------ | | Function | No | +### `horizontalAlignment` + +Optional prop to control the horizontal alignment of the AccordionHeader. + +| TYPE | REQUIRED | DEFAULT | +| :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- | +| AccordionHeaderHorizontalAlignment | No | AccordionHeaderHorizontalAlignment.Center | + ## Usage ```javascript @@ -39,5 +47,6 @@ import AccordionHeader from 'app/component-library/components/Accordions/Accordi ; + onPress={ONPRESS_HANDLER}/> + horizontalAlignment={AccordionHeaderHorizontalAlignment.Center}; ``` diff --git a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap index a4d6da654dd..11d24fdc748 100644 --- a/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap +++ b/app/component-library/components/Accordions/Accordion/foundation/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap @@ -7,13 +7,12 @@ exports[`AccordionHeader - Snapshot should render a rotated down Arrow if isExpa style={ Object { "alignItems": "center", - "backgroundColor": "#FFFFFF", "flexDirection": "row", "height": 24, "justifyContent": "center", } } - testID="accordion-header" + testID="accordionheader" > Sample Accordion Header Title @@ -41,13 +40,13 @@ exports[`AccordionHeader - Snapshot should render a rotated down Arrow if isExpa }, ] } - testID="accordion-header-arrow-icon-animation" + testID="accordionheader-arrow-icon-animation" > @@ -60,13 +59,12 @@ exports[`AccordionHeader - Snapshot should render default settings correctly 1`] style={ Object { "alignItems": "center", - "backgroundColor": "#FFFFFF", "flexDirection": "row", "height": 24, "justifyContent": "center", } } - testID="accordion-header" + testID="accordionheader" > Sample Accordion Header Title @@ -94,13 +92,13 @@ exports[`AccordionHeader - Snapshot should render default settings correctly 1`] }, ] } - testID="accordion-header-arrow-icon-animation" + testID="accordionheader-arrow-icon-animation" > diff --git a/app/component-library/components/Accordions/Accordion/index.ts b/app/component-library/components/Accordions/Accordion/index.ts index ff96031263c..6535a4f3354 100644 --- a/app/component-library/components/Accordions/Accordion/index.ts +++ b/app/component-library/components/Accordions/Accordion/index.ts @@ -1 +1,2 @@ export { default } from './Accordion'; +export { AccordionHeaderHorizontalAlignment } from './foundation/AccordionHeader/AccordionHeader.types';