style: Added horizontalAlignment to Accordions

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;

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 (
-    <Accordion title={titleText} isExpanded={isExpanded}>
-      <View
-        style={{
-          backgroundColor: mockTheme.colors.background.alternative,
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <Text variant={TextVariant.BodySM}>{'Wrapped Content'}</Text>
-      </View>
-    </Accordion>
-  );
+export const getAccordionStoryProps = (): AccordionProps => ({
+  ...getAccordionHeaderStoryProps(),
+  children: (
+    <View
+      style={{
+        backgroundColor: mockTheme.colors.background.alternative,
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Text variant={TextVariant.BodySM}>{'Wrapped Content'}</Text>
+    </View>
+  ),
 });
+
+const AccordionStory = () => <Accordion {...getAccordionStoryProps()} />;
+
+storiesOf('Component Library / Accordions', module)
+  .add('Accordion', AccordionStory)
+  .add('foundation / AccordionHeader', AccordionHeaderStory);
+
+export default AccordionStory;

app/component-library/components/Accordions/Accordion/Accordion.test.tsx

@@ -3,28 +3,26 @@ 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(
-      <Accordion title={TEST_ACCORDION_HEADER_TITLE}>
+      <Accordion title={SAMPLE_ACCORDION_TITLE}>
         <View />
       </Accordion>,
     );
     expect(wrapper).toMatchSnapshot();
   });
   it('should render a proper expanded state', () => {
     const wrapper = shallow(
-      <Accordion title={TEST_ACCORDION_HEADER_TITLE} isExpanded>
+      <Accordion title={SAMPLE_ACCORDION_TITLE} isExpanded>
         <View />
       </Accordion>,
     );
@@ -35,36 +33,36 @@ describe('Accordion - Snapshot', () => {
 describe('Accordion', () => {
   it('should render Accordion', () => {
     const wrapper = shallow(
-      <Accordion title={TEST_ACCORDION_HEADER_TITLE}>
+      <Accordion title={SAMPLE_ACCORDION_TITLE}>
         <View />
       </Accordion>,
     );
     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(
-      <Accordion title={TEST_ACCORDION_HEADER_TITLE} isExpanded>
+      <Accordion title={SAMPLE_ACCORDION_TITLE} isExpanded>
         <View />
       </Accordion>,
     );
     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(
-      <Accordion title={TEST_ACCORDION_HEADER_TITLE}>
+      <Accordion title={SAMPLE_ACCORDION_TITLE}>
         <View />
       </Accordion>,
     );
     const AccordionContentComponent = wrapper.findWhere(
-      (node) => node.prop('testID') === ACCORDION_CONTENT_TEST_ID,
+      (node) => node.prop('testID') === TESTID_ACCORDION_CONTENT,
     );
     expect(AccordionContentComponent.exists()).toBe(false);
   });

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<AccordionProps> = ({
@@ -33,11 +32,11 @@ const Accordion: React.FC<AccordionProps> = ({
   //   <Transition.Together>
   //     <Transition.In
   //       type="fade"
-  //       durationMs={ACCORDION_EXPAND_TRANSITION_DURATION}
+  //       durationMs={DEFAULT_ACCORDION_EXPANDDURATION}
   //     />
   //     <Transition.Out
   //       type="fade"
-  //       durationMs={ACCORDION_EXPAND_TRANSITION_DURATION}
+  //       durationMs={DEFAULT_ACCORDION_EXPANDDURATION}
   //     />
   //   </Transition.Together>
   // );
@@ -50,21 +49,24 @@ const Accordion: React.FC<AccordionProps> = ({
   };
 
   return (
-    <View style={styles.base} testID={ACCORDION_TEST_ID} {...props}>
+    <>
       <AccordionHeader
         title={title}
         isExpanded={expanded}
         onPress={onHeaderPressed}
+        style={styles.base}
+        testID={TESTID_ACCORDION}
+        {...props}
       />
       {expanded && (
         <Animated.View
           // TODO - Reintroduce layout animations to accordion
-          testID={ACCORDION_CONTENT_TEST_ID}
+          testID={TESTID_ACCORDION_CONTENT}
         >
           {children}
         </Animated.View>
       )}
-    </View>
+    </>
   );
 };
 

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.
    */

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.
+
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> | <span style="color:gray;font-size:14px">DEFAULT</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ | :----------------------------------------------------- |
+| AccordionHeaderHorizontalAlignment                   | No                                                     | AccordionHeaderHorizontalAlignment.Center              |
+
 ## Usage
 
 ```javascript
@@ -47,7 +55,8 @@ import Accordion from 'app/component-library/components/Accordions/Accordion/Acc
 <Accordion 
   title={TITLE} 
   isExpanded 
-  onPress={ONPRESS_HANDLER}>
+  onPress={ONPRESS_HANDLER}
+  horizontalAlignment={AccordionHeaderHorizontalAlignment.Center}>
     <ACCORDION_CONTENT/>
 </Accordion>;
 ```

app/component-library/components/Accordions/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -1,32 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Accordion - Snapshot should render a proper expanded state 1`] = `
-<View
-  style={Object {}}
-  testID="accordion"
->
+<Fragment>
   <AccordionHeader
     isExpanded={true}
     onPress={[Function]}
+    style={Object {}}
+    testID="accordion"
     title="Sample Accordion Header Title"
   />
   <View
     testID="accordion-content"
   >
     <View />
   </View>
-</View>
+</Fragment>
 `;
 
 exports[`Accordion - Snapshot should render default settings correctly 1`] = `
-<View
-  style={Object {}}
-  testID="accordion"
->
+<Fragment>
   <AccordionHeader
     isExpanded={false}
     onPress={[Function]}
+    style={Object {}}
+    testID="accordion"
     title="Sample Accordion Header Title"
   />
-</View>
+</Fragment>
 `;

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

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 = () => (
+  <AccordionHeader {...getAccordionHeaderStoryProps()} />
+);
 
-  return <AccordionHeader title={titleText} isExpanded={isExpanded} />;
-});
+export default AccordionHeaderStory;