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
influxdata · Oct 6, 2022 · 27afbad · 27afbad
1 parent d59fb30
commit 27afbad
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 50 deletions.
diff --git 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
@@ -1,14 +1,12 @@
 // Libraries
-import React, {forwardRef, useState, useEffect} from 'react'
+import React, {forwardRef, useEffect, useState} from 'react'
 import classnames from 'classnames'
 // Styles
 import './Accordion.scss'
 // Types
 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
@@ -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
@@ -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
@@ -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;