From 27afbad7b68181b38e4837222e95393fa1cb50e1 Mon Sep 17 00:00:00 2001
From: ChitlangeSahas <chitlangesahas@gmail.com>
Date: Wed, 5 Oct 2022 22:16:16 -0700
Subject: [PATCH] feat(Accordion): Accordion Changes

1. Colors and Icon placement
2. Fixed the icon bug for when accordion opens/closes (it didn't change icons)
3. Updated storybook
---
 src/Components/Accordion/Accordion.scss       |  7 +++--
 src/Components/Accordion/Accordion.tsx        | 14 ++--------
 src/Components/Accordion/AccordionHeader.tsx  | 20 +-------------
 .../Documentation/Accordion.stories.tsx       | 16 +----------
 src/Styles/variables.scss                     | 27 +++++++++++++++++++
 5 files changed, 34 insertions(+), 50 deletions(-)

diff --git a/src/Components/Accordion/Accordion.scss b/src/Components/Accordion/Accordion.scss
index 3c555c66..34030203 100644
--- a/src/Components/Accordion/Accordion.scss
+++ b/src/Components/Accordion/Accordion.scss
@@ -7,7 +7,6 @@
 
 .cf-accordion--icon-container {
   position: relative;
-  // min-width: $cf-space-s;
 }
 
 .cf-accordion--icon-container-left {
@@ -40,7 +39,7 @@
   width: 100%;
   min-height: $cf-form-lg-height;
   border-radius: $cf-radius;
-  background-color: $cf-grey-25;
+  background-color: $cf-grey-3;
   align-items: center;
   outline: none;
   padding: $cf-space-s;
@@ -115,11 +114,11 @@
   @extend .cf-accordion--header;
   min-height: $cf-form-md-height;
   padding: $cf-form-md-padding;
-  background-color: $cf-grey-15;
+  background-color: $cf-grey-2;
   border-radius: 0px;
 
   &:hover {
-    background-color: $cf-grey-15;
+    background-color: $cf-martinique;
   }
 }
 
diff --git a/src/Components/Accordion/Accordion.tsx b/src/Components/Accordion/Accordion.tsx
index 5d2e798a..f6eda437 100644
--- a/src/Components/Accordion/Accordion.tsx
+++ b/src/Components/Accordion/Accordion.tsx
@@ -1,5 +1,5 @@
 // Libraries
-import React, {forwardRef, useState, useEffect} from 'react'
+import React, {forwardRef, useEffect, useState} from 'react'
 import classnames from 'classnames'
 // Styles
 import './Accordion.scss'
@@ -7,8 +7,6 @@ import './Accordion.scss'
 import {Direction, StandardFunctionProps} from '../../Types'
 
 export interface AccordionProps extends StandardFunctionProps {
-  /** Determines whether the expand Icon is at the left, right or doesn't exist. If there is no accordionBody, no icons are shown*/
-  iconPlacement?: Direction
   /** Determines whether the accordion is expanded by default or not */
   expanded?: boolean
   /** Prevents any interaction with this element, including the onClick function */
@@ -46,7 +44,6 @@ export const AccordionRoot = forwardRef<AccordionRef, AccordionProps>(
       style,
       testID = 'accordion',
       children,
-      iconPlacement = Direction.Left,
       className,
       expanded = false,
       disabled = false,
@@ -61,9 +58,6 @@ export const AccordionRoot = forwardRef<AccordionRef, AccordionProps>(
     const [isExpanded, setExpanded] = useState(expanded)
     const [animation, setAnimation] = useState(false)
     const [isDisabled, setDisabled] = useState(disabled)
-    const [iconPlacementPosition, setIconPlacementPosition] = useState(
-      iconPlacement
-    )
 
     useEffect(() => {
       setExpanded(expanded)
@@ -79,10 +73,6 @@ export const AccordionRoot = forwardRef<AccordionRef, AccordionProps>(
       }
     }, [isExpanded])
 
-    useEffect(() => {
-      setIconPlacementPosition(iconPlacement)
-    }, [iconPlacement])
-
     const accordionBodyContainerClassName = classnames(
       'cf-accordion--body-container',
       {
@@ -106,7 +96,7 @@ export const AccordionRoot = forwardRef<AccordionRef, AccordionProps>(
     const contextState = {
       isExpanded,
       setExpanded,
-      iconPlacementPosition: hasBody ? iconPlacementPosition : Direction.None,
+      iconPlacementPosition: hasBody ? Direction.Left : Direction.None,
       isDisabled,
       onChange: onChangeFunction,
       hasBody: hasBody,
diff --git a/src/Components/Accordion/AccordionHeader.tsx b/src/Components/Accordion/AccordionHeader.tsx
index 8a7e508a..fc75ca46 100644
--- a/src/Components/Accordion/AccordionHeader.tsx
+++ b/src/Components/Accordion/AccordionHeader.tsx
@@ -59,28 +59,10 @@ export const AccordionHeader = forwardRef<
             'cf-accordion--icon-container cf-accordion--icon-container-left'
           }
         >
-          <Icon
-            glyph={IconFont.CaretDown_New}
-            className={AccordionHeaderCaretClassName}
-          />
+          <Icon glyph={caretIcon} className={AccordionHeaderCaretClassName} />
         </div>
       )}
       <div className={'cf-accordion--header--content'}>{children}</div>
-      {context.iconPlacementPosition === Direction.Right && (
-        <div
-          onClick={() => {
-            context.setExpanded(!context.isExpanded)
-          }}
-          className={
-            'cf-accordion--icon-container cf-accordion--icon-container-right'
-          }
-        >
-          <Icon
-            glyph={IconFont.CaretDown_New}
-            className={AccordionHeaderCaretClassName}
-          />
-        </div>
-      )}
     </button>
   )
 })
diff --git a/src/Components/Accordion/Documentation/Accordion.stories.tsx b/src/Components/Accordion/Documentation/Accordion.stories.tsx
index fa47122d..0e5f134a 100644
--- a/src/Components/Accordion/Documentation/Accordion.stories.tsx
+++ b/src/Components/Accordion/Documentation/Accordion.stories.tsx
@@ -4,7 +4,7 @@ import marked from 'marked'
 
 // Storybook
 import {storiesOf} from '@storybook/react'
-import {boolean, object, select, withKnobs} from '@storybook/addon-knobs'
+import {boolean, object, withKnobs} from '@storybook/addon-knobs'
 
 // Components
 import {Accordion, AccordionRef} from '../'
@@ -18,14 +18,12 @@ import {
   AlignItems,
   ComponentSize,
   FlexDirection,
-  Direction,
   InputToggleType,
   JustifyContent,
   HeadingElement,
 } from '../../../Types'
 import {FlexBox} from '../../FlexBox'
 import {AccordionBodyItem} from '../AccordionBodyItem'
-import {mapEnumKeys} from '../../../Utils/storybook'
 import {Heading} from '../../Typography'
 
 const accordionStories = storiesOf(
@@ -283,9 +281,6 @@ accordionStories.add(
         style={{justifyContent: 'none', alignItems: 'start', display: 'block'}}
       >
         <Accordion
-          iconPlacement={
-            Direction[select('Icon Placement', mapEnumKeys(Direction), 'Left')]
-          }
           expanded={boolean('expanded', false)}
           disabled={disabled}
           style={object('style', {})}
@@ -328,9 +323,6 @@ accordionStories.add(
           </Accordion.AccordionBodyItem>
         </Accordion>
         <Accordion
-          iconPlacement={
-            Direction[select('Icon Placement', mapEnumKeys(Direction), 'Left')]
-          }
           expanded={boolean('expanded', false)}
           disabled={disabled}
           style={object('style', {})}
@@ -399,9 +391,6 @@ accordionStories.add(
       >
         {' '}
         <Accordion
-          iconPlacement={
-            Direction[select('Icon Placement', mapEnumKeys(Direction), 'Left')]
-          }
           expanded={boolean('expanded', false)}
           disabled={disabled}
           style={object('style', {})}
@@ -448,9 +437,6 @@ accordionFamilyStories.add(
         style={{justifyContent: 'none', alignItems: 'start', display: 'block'}}
       >
         <Accordion
-          iconPlacement={
-            Direction[select('Icon Placement', mapEnumKeys(Direction), 'Left')]
-          }
           expanded={boolean('expanded', false)}
           disabled={disabled}
           style={object('style', {})}
diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss
index a57f85e6..990840a3 100644
--- a/src/Styles/variables.scss
+++ b/src/Styles/variables.scss
@@ -3,6 +3,33 @@
    -----------------------------------------------------------------------------
 */
 
+// New Greys
+$cf-grey-1: #0e101f;
+$cf-grey-2: #1a1c2b;
+$cf-grey-3: #232533;
+$cf-grey-4: #4b4f62;
+$cf-grey-5: #88889b;
+$cf-grey-6: #c2c5db;
+$cf-white: #ffffff;
+
+// Brand Colors
+$cf-turquoise: #5ee4e4;
+$cf-lavender: #c77bea;
+$cf-hot-pink: #f863b0;
+$cf-chartreuse: #d6f622;
+
+// Utility Colors
+$cf-lime-green: #51d91c;
+$cf-carnation: #e65b5b;
+
+// Background Colors
+$cf-elephant: #1e3a46;
+$cf-martinique: #332548;
+$cf-voodoo: #482543;
+$cf-verdun-green: #546120;
+$cf-seaweed: #1b381f;
+$cf-thunder: #311c29;
+
 // Greys
 $cf-grey-5: #07070e;
 $cf-grey-15: #1a1a2a;