playbook_ui 13.13.0.pre.alpha.play10821727 → 13.14.0.pre.alpha.play1106filter1748

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1eb2326d6a67b4005db2cb0481deac4df20af2e2a6a73ea11449139871a6fc7f
-  data.tar.gz: bffdbbfa56d2d9de69e5943008d8009a2612140ab5169b7a045a3ee8a2690f2c
+  metadata.gz: f272c5d989be26b3c950987f4c51f59584acd918be553652bcba094822f20e30
+  data.tar.gz: 2ee2b321862499edac8e935e29c03cb3c395fb03d23b9a89526ea66ae02f8d9e
 SHA512:
-  metadata.gz: 1a4a38576c49d6daa6de742da8df76570a7fac453d91dd4547828d68e7256c2b73e0eb48552a0b450bd78f888ea33409bbefd0f8d560a7d4c883c737aae782ef
-  data.tar.gz: 6f58e4bf63dcbf51e248ff3b02c3b08a7d2cf55fc3f73822b0998ee500ef8ee98a8ba17880efe9b31c07178c010a087365a954242fde8caea1e184d484c3d49e
+  metadata.gz: 8ed8dda83ec7bf30f439f43761a44a34914fcbcd80e8786d73b57f31c8b91628b31381d6bd209ffc8b1a2f6a69b7116a24a1e3ed54814f976356390c5e2f4f72
+  data.tar.gz: d6971706d60344e0748c76dec38f0a98fea3ca83cfbd26f7090f3598cd6a3b35ec6d873fd4f128786e223bd4bbff9af86fbe57fb1ad231ecaee92b94085b0a0d

data/app/pb_kits/playbook/index.js

@@ -130,4 +130,16 @@ export { default as dialogHelper } from './pb_dialog/dialogHelper'
 
 //Theming
 export {default as mapTheme} from './pb_map/pbMapTheme'
-export {default as useCollapsible} from './pb_collapsible/useCollapsible'
+export {default as useCollapsible} from './pb_collapsible/useCollapsible'
+
+// CSS Tokens
+export { default as borderRadius } from './tokens/exports/_border_radius.scss'
+export { default as colors } from './tokens/exports/_colors.scss'
+export { default as lineHeight } from './tokens/exports/_line_height.scss'
+export { default as opacity } from './tokens/exports/_opacity.scss'
+export { default as positioning } from './tokens/exports/_positioning.scss'
+export { default as scale } from './tokens/exports/_scale.scss'
+export { default as screenSizes } from './tokens/exports/_screen_sizes.scss'
+export { default as shadows } from './tokens/exports/_shadows.scss'
+export { default as spacing } from './tokens/exports/_spacing.scss'
+export { default as typography } from './tokens/exports/_typography.scss'

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -12,7 +12,7 @@ export type AvatarProps = {
   className?: string,
   data?: {[key: string]: string},
   dark?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -32,7 +32,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     className,
     data = {},
     htmlOptions = {},
-    name = undefined,
+    name = null,
     id = '',
     imageAlt = '',
     imageUrl,
@@ -40,8 +40,8 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
     status = null,
     dark = false,
   } = props
-  const dataProps: {[key: string]: string} = buildDataProps(data)
-  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss('pb_avatar_kit', `size_${size}`),
@@ -50,7 +50,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
   )
 
   const initials = name && firstTwoInitials(name)
-  dataProps['data-initials'] = (initials as string)
+  dataProps['data-initials'] = initials
 
   const [error, setError] = useState(false)
   const handleError = () => setError(true)

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx

@@ -19,8 +19,8 @@ type AvatarActionButtonProps = {
   linkAriaLabel?: string,
   className?: string,
   dark?: boolean,
-  data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  data?: Object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   imageAlt?: string,
   imageUrl?: string,
@@ -31,7 +31,7 @@ type AvatarActionButtonProps = {
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
 }
 
-const AvatarActionButton = (props: AvatarActionButtonProps): React.ReactElement => {
+const AvatarActionButton = (props: AvatarActionButtonProps) => {
   const {
     action = 'add',
     aria = {},

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -23,7 +23,7 @@ type BackgroundProps = {
   className?: string,
   customColor?: string,
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
@@ -63,7 +63,7 @@ const getResponsiveValue = <T extends string | undefined>(prop: ResponsiveProp<T
   return prop?.default || undefined;
 };
 
-const Background = (props: BackgroundProps): React.ReactElement => {
+const Background = (props: BackgroundProps) => {
   const {
     alt = '',
     aria = {},
@@ -144,13 +144,13 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   
   return (
     <Tag
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        alt={alt}
-        className={classes}
-        id={id}
-        style={backgroundStyle}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      alt={alt}
+      className={classes}
+      id={id}
+      style={backgroundStyle}
     >
       {children}
     </Tag>

data/app/pb_kits/playbook/pb_badge/_badge.tsx

@@ -19,7 +19,7 @@ type BadgeProps = {
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
   },
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   removeIcon?: boolean,
   removeOnClick?: React.MouseEventHandler<HTMLSpanElement>,
@@ -27,7 +27,7 @@ type BadgeProps = {
   text?: string,
   variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning",
 } & GlobalProps
-const Badge = (props: BadgeProps): React.ReactElement => {
+const Badge = (props: BadgeProps) => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -19,9 +19,9 @@ type BarGraphProps = {
   yAxisMax: number;
   chartData: { name: string; data: number[] }[];
   className?: string;
-  id: string;
-  pointStart: number;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
+  id: any;
+  pointStart: number | any;
   subTitle?: string;
   title: string;
   type?: string;

data/app/pb_kits/playbook/pb_body/_body.tsx

@@ -15,7 +15,7 @@ type BodyProps = {
   data?: {[key: string]: string},
   highlightedText?: string[],
   highlighting?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   status?: 'neutral' | 'negative' | 'positive',
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
@@ -43,8 +43,8 @@ const Body = (props: BodyProps): React.ReactElement => {
     variant = null,
   } = props
 
-  const ariaProps: {[key: string]: string} = buildAriaProps(aria)
-  const dataProps: {[key: string]: string} = buildDataProps(data)
+  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+  const dataProps: {[key: string]: any} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);
   const isTruncated = truncate ? `truncate_${truncate}` : ''
   const classes = classnames(
@@ -52,7 +52,8 @@ const Body = (props: BodyProps): React.ReactElement => {
     globalProps(props),
     className
   )
-  const Tag: keyof JSX.IntrinsicElements = `${tag}`
+  const Tag: React.ReactElement | any = `${tag}`
+
 
   return (
     <Tag

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx

@@ -13,14 +13,15 @@ import {
 type BreadCrumbItemProps = {
   aria?: {[key: string]: string},
   className?: string,
-  data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   component?: "a" | "span",
   [x:string]: any;
 }
 
-const BreadCrumbItem = (props: BreadCrumbItemProps): React.ReactElement => {
+
+const BreadCrumbItem = (props: BreadCrumbItemProps) => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.tsx

@@ -12,13 +12,13 @@ import {
 type BreadCrumbsProps = {
   aria?: {[key: string]: string},
   className?: string,
-  data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   text?: string,
   children?: React.ReactChild[] | React.ReactNode,
 }
-const BreadCrumbs = (props: BreadCrumbsProps): React.ReactElement => {
+const BreadCrumbs = (props: BreadCrumbsProps) => {
   const {
     aria = { label: 'Breadcrumb Navigation' },
     className,

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -21,7 +21,7 @@ type ButtonPropTypes = {
   form?: string,
   fullWidth?: boolean,
   highlight?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   icon?: string,
   iconRight?: boolean,
   id?: string,
@@ -66,7 +66,7 @@ const buttonClassName = (props: ButtonPropTypes) => {
   return className
 }
 
-const Button = (props: ButtonPropTypes): React.ReactElement => {
+const Button = (props: ButtonPropTypes) => {
   const {
     aria = {},
     children,
@@ -150,16 +150,16 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
     if (link) {
       return (
         <a
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={css}
-            href={link}
-            id={id}
-            rel={target !== "child" ? "noreferrer" : null}
-            role="link"
-            tabIndex={tabIndex}
-            target={getTargetAttribute()}
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={css}
+          href={link}
+          id={id}
+          rel={target !== "child" ? "noreferrer" : null}
+          role="link"
+          tabIndex={tabIndex}
+          target={getTargetAttribute()}
         >
           {ifLoading()}
         </a>
@@ -167,27 +167,24 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
     } else if (variant === "reaction") {
       return (
         <button
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={css}
-            disabled={disabled}
-            form={form}
-            id={id}
-            onClick={onClick}
-            role="button"
-            tabIndex={tabIndex}
-            type={htmlType}
-            value={value}
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={css}
+          disabled={disabled}
+          form={form}
+          id={id}
+          onClick={onClick}
+          role="button"
+          tabIndex={tabIndex}
+          type={htmlType}
+          value={value}
         >
           {icon && isValidEmoji(icon) && (
             <Flex align='center'>
               <Icon icon={icon} />
               {count && (
-                <Caption 
-                    paddingLeft="xxs"
-                    size="xs"
-                >
+                <Caption paddingLeft="xxs" size="xs">
                   {count}
                 </Caption>
               )}
@@ -206,18 +203,18 @@ const Button = (props: ButtonPropTypes): React.ReactElement => {
     } else {
       return (
         <button
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={css}
-            disabled={disabled}
-            form={form}
-            id={id}
-            onClick={onClick}
-            role="button"
-            tabIndex={tabIndex}
-            type={htmlType}
-            value={value}
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={css}
+          disabled={disabled}
+          form={form}
+          id={id}
+          onClick={onClick}
+          role="button"
+          tabIndex={tabIndex}
+          type={htmlType}
+          value={value}
         >
           {ifLoading()}
         </button>

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx

@@ -12,8 +12,8 @@ type ButtonToolbarProps = {
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
   connected?: boolean,
-  data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  data?: object,
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   onClick?: React.MouseEventHandler<HTMLSpanElement>,
   orientation?: "horizontal" | "vertical",
@@ -21,7 +21,7 @@ type ButtonToolbarProps = {
  variant?: "primary" | "secondary",
 }
 
-const ButtonToolbar  = (props: ButtonToolbarProps): React.ReactElement => {
+const ButtonToolbar  = (props: ButtonToolbarProps) => {
   const {
     aria = {},
     children,

data/app/pb_kits/playbook/pb_caption/_caption.tsx

@@ -9,7 +9,7 @@ type CaptionProps = {
   className?: string,
   color?: "default" | "light" | "lighter" | "success" | "error" | "link",
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   size?: "xs" | "sm" | "md" | "lg" | "xl",
   tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption",

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -16,7 +16,7 @@ type CardPropTypes = {
   children: React.ReactChild[] | React.ReactChild | number,
   className?: string,
   data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   highlight?: {
     position?: "side" | "top",
     color?: string,
@@ -69,7 +69,7 @@ const Body = (props: CardBodyProps) => {
   )
 }
 
-const Card = (props: CardPropTypes): React.ReactElement => {
+const Card = (props: CardPropTypes) => {
   const {
     aria = {},
     background = 'none',

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -80,7 +80,6 @@ $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors)
   width: $width;
   height: $height;
   background: $background;
-  z-index: 10;
 }
 
 @mixin pb_card_header_color($header_color) {

data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx

@@ -57,7 +57,7 @@ const CardBackground = (props) => {
           background="product_1_background"
           marginBottom="sm"
           {...props}
-      >
+        >
         <Body
             dark
             text="Product 1 Background"
@@ -69,12 +69,11 @@ const CardBackground = (props) => {
       <Card 
           background="product_7_highlight" 
           marginBottom="sm"
-          {...props}
-      >
+          {...props} >
         <Body 
             dark
-            text="Product 7 Highlight"
-        />
+            text="Product 7 Highlight"  
+          />
       </Card>
 
       

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -13,7 +13,7 @@ type CheckboxProps = {
   dark?: boolean,
   data?: {[key: string]: string},
   error?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   indeterminate?: boolean,
   name?: string,
@@ -23,7 +23,7 @@ type CheckboxProps = {
   value?: string,
 } & GlobalProps
 
-const Checkbox = (props: CheckboxProps): React.ReactElement => {
+const Checkbox = (props: CheckboxProps): JSX.Element => {
   const {
     aria = {},
     checked = false,
@@ -73,7 +73,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
         tabIndex={tabIndex}
         type="checkbox"
         value={value}
-    />)
+      />)
   }
 
   return (

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -18,12 +18,12 @@ type CircleChartProps = {
   children?: Node;
   className?: string;
   colors?: string[];
-  dark?: boolean;
-  data?: {[key: string]: string},
+  dark?: Boolean;
+  data?: Object;
   dataLabelHtml?: string;
   dataLabels?: boolean;
   height?: string;
-  htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
+  htmlOptions?: { [key: string]: string | number | boolean | Function };
   id?: string;
   innerSize?: "sm" | "md" | "lg" | "none";
   legend?: boolean;
@@ -180,29 +180,29 @@ const CircleChart = ({
       {children ? (
         <div id={`wrapper-circle-chart-${id}`}>
           <HighchartsReact
-              containerProps={{
+            containerProps={{
               className: classnames("pb_circle_chart", globalProps(props)),
               id: id,
               ...ariaProps,
               ...dataProps,
               ...htmlProps,
             }}
-              highcharts={Highcharts}
-              options={options}
+            highcharts={Highcharts}
+            options={options}
           />
           <div className="pb-circle-chart-block">{children}</div>
         </div>
       ) : (
         <HighchartsReact
-            containerProps={{
+          containerProps={{
             className: classnames("pb_circle_chart", globalProps(props)),
             id: id,
             ...ariaProps,
             ...dataProps,
             ...htmlProps,
           }}
-            highcharts={Highcharts}
-            options={options}
+          highcharts={Highcharts}
+          options={options}
         />
       )}
     </>

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -13,7 +13,7 @@ type CircleIconButtonProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   icon: string,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
   link?: string,
   onClick?: React.MouseEventHandler<HTMLElement>,

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -12,20 +12,22 @@ import { IconSizes } from "../pb_icon/_icon"
 
 
 type CollapsibleProps = {
-  children?: React.ReactElement | [] | any,
+  children?: JSX.Element | [] | any,
   aria?: {[key: string]: string},
   className?: string,
   collapsed?: boolean,
-  data?: {[key: string]: string},
+  data?: object,
   icon?: string | string[],
   iconColor?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success',
   iconSize?: IconSizes,
   onIconClick?: ()=> void,
   onClick?: ()=> void,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | Function},
   id?: string,
 }
 
+
+
 const Collapsible = ({
   aria = {},
   className,
@@ -40,14 +42,14 @@ const Collapsible = ({
   onClick,
   id,
   ...props
-}: CollapsibleProps): React.ReactElement => {
+}: CollapsibleProps) => {
   const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
 
   useEffect(()=> {
    setIsCollapsed(collapsed)
   },[collapsed])
 
-  const CollapsibleParent = React.Children.toArray(children) as React.ReactElement[]
+  const CollapsibleParent = React.Children.toArray(children) as JSX.Element[]
 
   if (CollapsibleParent.length !== 2) {
     throw new Error('Collapsible requires <CollapsibleMain> and <CollapsibleContent> to function properly.')

data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts

@@ -1,4 +1,4 @@
-export const showElement = (elem: HTMLElement) => {
+export const showElement = (elem:any) => {
   elem.style.display = 'block';
   const height = elem.scrollHeight + 'px'; // Get its height
   elem.style.height = height; // Update the max-height
@@ -11,7 +11,7 @@ export const showElement = (elem: HTMLElement) => {
   }, 300);
 };
 
-export const hideElement = (elem: HTMLElement) => {
+export const hideElement = (elem:any) => {
   elem.style.height = elem.scrollHeight + 'px';
 
   window.setTimeout(() => {

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx

@@ -15,7 +15,7 @@ const CollapsibleContent = ({
   children,
   className,
   ...props
-}: CollapsibleContentProps): React.ReactElement => {
+}: CollapsibleContentProps) => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props)
@@ -33,10 +33,9 @@ const CollapsibleContent = ({
   }, [context.collapsed]);
 
   return (
-    <div className={classnames(contentCSS, contentSpacing, "toggle-content", className)}
-        data-collapsible-content="true" 
-        ref={contentRef}
-    >
+    <div ref={contentRef}
+      data-collapsible-content="true" 
+      className={classnames(contentCSS, contentSpacing, "toggle-content", className)}>
       {children}
     </div>
   )

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -56,7 +56,7 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconP
     return icon
   }
 
-  const handleIconClick = (e: React.MouseEvent<HTMLElement>) => {
+  const handleIconClick = (e:any) => {
     if (onIconClick) {
     e.stopPropagation();
     onIconClick()
@@ -67,25 +67,21 @@ const ToggleIcon = ({ collapsed, icon, iconSize, iconColor, onIconClick }: IconP
     <>
       {collapsed ? (
         <div
-            className="icon_wrapper"
-            key={icon ? showIcon(icon)[0] : "chevron-down"}
-            onClick={(e)=> handleIconClick(e)}
-            style={{ verticalAlign: "middle", color: color }}
+          className="icon_wrapper"
+          key={icon ? showIcon(icon)[0] : "chevron-down"}
+          style={{ verticalAlign: "middle", color: color }}
+          onClick={(e)=> handleIconClick(e)}
         >
-          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"}
-              size={iconSize}
-          />
+          <Icon icon={icon ? showIcon(icon)[0] : "chevron-down"} size={iconSize} />
         </div>
       ) : (
         <div
-            className="icon_wrapper"
-            key={icon ? showIcon(icon)[1] : "chevron-up"}
-            onClick={(e)=> handleIconClick(e)}
-            style={{ verticalAlign: "middle", color: color }}
+          className="icon_wrapper"
+          key={icon ? showIcon(icon)[1] : "chevron-up"}
+          style={{ verticalAlign: "middle", color: color }}
+          onClick={(e)=> handleIconClick(e)}
         >
-          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"}
-              size={iconSize}
-          />
+          <Icon icon={icon ? showIcon(icon)[1] : "chevron-up"} size={iconSize} />
         </div>
       )}
     </>
@@ -122,9 +118,9 @@ const CollapsibleMain = ({
           <FlexItem>
             <ToggleIcon
                 collapsed={collapsed as () => void}
-                icon={icon as string[] | string}
                 iconColor={iconColor as IconColors}
                 iconSize={iconSize as IconSizes}
+                icon={icon as string[] | string}
                 onIconClick={onIconClick}
             />
             </FlexItem>