From 60287779d9fd8574c0d9526063364ea7236700e4 Mon Sep 17 00:00:00 2001
From: Alexandru Buliga <bugaaa92@gmail.com>
Date: Tue, 31 Jul 2018 19:39:26 +0200
Subject: [PATCH 01/14] fix: Component interfaces extend React attributes

---
 src/components/Button/Button.tsx | 4 +---
 src/components/Icon/Icon.tsx     | 8 ++------
 src/components/Text/Text.tsx     | 2 --
 src/lib/UIComponent.tsx          | 9 +++++++--
 4 files changed, 10 insertions(+), 13 deletions(-)

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 7c32d4ac55..bbc26af745 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { ReactNode, CSSProperties, SyntheticEvent } from 'react'
+import React, { ReactNode, SyntheticEvent } from 'react'
 
 import { UIComponent, childrenExist, customPropTypes, IRenderResultConfig } from '../../lib'
 import buttonRules from './buttonRules'
@@ -11,7 +11,6 @@ export type IconPosition = 'before' | 'after'
 export type ButtonType = 'primary' | 'secondary'
 
 export interface IButtonProps {
-  as?: string
   children?: ReactNode
   circular?: boolean
   className?: string
@@ -21,7 +20,6 @@ export interface IButtonProps {
   icon?: boolean | string
   iconPosition?: IconPosition
   onClick?: (e: SyntheticEvent, props: IButtonProps) => void
-  style?: CSSProperties
   type?: ButtonType
 }
 
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index 1e7875efe4..b88f1bca0d 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react'
+import React, { HTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 import { customPropTypes, UIComponent, SUI } from '../../lib'
 
@@ -25,19 +25,15 @@ export type IconSize = 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'm
 
 export type IconXSpacing = 'none' | 'before' | 'after' | 'both'
 
-export interface IconProps {
-  as?: string
+export interface IconProps extends HTMLAttributes<HTMLElement> {
   bordered?: boolean
   circular?: boolean
-  className?: string
   color?: IconColor
   disabled?: boolean
   kind?: string
   name?: string
   size?: IconSize
   xSpacing?: IconXSpacing
-  style?: CSSProperties
-  title?: string
 }
 
 class Icon extends UIComponent<IconProps, {}> {
diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx
index 69523e90f4..ea92e9de74 100644
--- a/src/components/Text/Text.tsx
+++ b/src/components/Text/Text.tsx
@@ -8,9 +8,7 @@ import textVariables from './textVariables'
 export type ITextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2x' | '3x' | '4x'
 
 export interface ITextProps {
-  as?: string
   atMention?: boolean
-  className?: string
   content?: ReactNode
   disabled?: boolean
   error?: boolean
diff --git a/src/lib/UIComponent.tsx b/src/lib/UIComponent.tsx
index efd20cd4f1..c8db72084c 100644
--- a/src/lib/UIComponent.tsx
+++ b/src/lib/UIComponent.tsx
@@ -1,7 +1,12 @@
-import React from 'react'
+import React, { HTMLAttributes } from 'react'
 import renderComponent, { IRenderResultConfig } from './renderComponent'
 
-class UIComponent<P, S> extends React.Component<P, S> {
+export interface UIComponentProps extends HTMLAttributes<HTMLElement> {
+  as?: string | Function
+  variables?: (siteVariables: object) => object
+}
+
+class UIComponent<P, S> extends React.Component<P & UIComponentProps, S> {
   private readonly childClass = this.constructor as typeof UIComponent
   static defaultProps: { [key: string]: any }
   static displayName: string

From 7813cacdb607f5d6fffa1fff369e20ee7d008fb9 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 1 Aug 2018 10:53:45 +0200
Subject: [PATCH 02/14] -fixing types

---
 src/components/Avatar/Avatar.tsx     | 4 ++--
 src/components/Avatar/avatarRules.ts | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index c2166616f5..43a493e193 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -100,7 +100,7 @@ class Avatar extends UIComponent<any, any> {
             className={classes.avatarLabel}
             as="div"
             content={this.getInitials(name)}
-            variables={{ padding: '0px' }}
+            variables={() => ({ padding: '0px' })}
             circular
             title={name}
           />
@@ -110,7 +110,7 @@ class Avatar extends UIComponent<any, any> {
             <Label
               className={classes.presenceIconLabel}
               as="div"
-              variables={{ padding: '0px' }}
+              variables={() => ({ padding: '0px' })}
               style={{ background: color }}
               circular
               title={name}
diff --git a/src/components/Avatar/avatarRules.ts b/src/components/Avatar/avatarRules.ts
index d92732d325..2b8a36932e 100644
--- a/src/components/Avatar/avatarRules.ts
+++ b/src/components/Avatar/avatarRules.ts
@@ -1,5 +1,5 @@
 import { pxToRem } from '../../lib'
-import { PositionProperty } from '../../../node_modules/csstype'
+import { PositionProperty } from 'csstype'
 
 const getAvatarDimension = (size: number) => {
   return 12 + size * 4
@@ -56,7 +56,7 @@ export default {
   }),
   presenceSpan: ({ props, variables }) => ({
     display: 'block',
-    position: 'relative',
+    position: 'relative' as PositionProperty,
     background: 'inherit',
     padding: pxToRem(getPresenceIconPadding(props.size, variables.presenceIconPadding)),
     margin: '0px',
@@ -83,7 +83,7 @@ export default {
     ),
   }),
   presenceIconLabel: ({ props }) => ({
-    position: 'relative',
+    position: 'relative' as PositionProperty,
     height: pxToRem(getPresenceIconSize(props.size)),
     width: pxToRem(getPresenceIconSize(props.size)),
     padding: '0px',

From 1616e3c872ecfcf861c2bf6d0f65c043172551c6 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 1 Aug 2018 10:58:06 +0200
Subject: [PATCH 03/14] -fixed images in the avatar

---
 .../Variations/AvatarExampleAlt.shorthand.tsx      |  2 +-
 .../Variations/AvatarExampleSize.shorthand.tsx     |  2 +-
 .../Variations/AvatarExampleSrc.shorthand.tsx      |  2 +-
 .../Variations/AvatarExampleStatus.shorthand.tsx   | 14 +++++++-------
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleAlt.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleAlt.shorthand.tsx
index ab1dce3397..842ac34ca2 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleAlt.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleAlt.shorthand.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
 const AvatarExampleAltShorthand = () => (
-  <Avatar src="/public/images/avatar/small/matt.jpg" alt="Profile picture of Matt" />
+  <Avatar src="public/images/avatar/small/matt.jpg" alt="Profile picture of Matt" />
 )
 
 export default AvatarExampleAltShorthand
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx
index 9842145d24..6a24b498f3 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx
@@ -11,7 +11,7 @@ const AvatarExampleSizeShorthand = () =>
         <Avatar
           key={size}
           size={size}
-          src="/public/images/avatar/small/matt.jpg"
+          src="public/images/avatar/small/matt.jpg"
           status="Available"
         />
       </div>
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleSrc.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleSrc.shorthand.tsx
index 0a65e19232..9e7792d8b1 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleSrc.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleSrc.shorthand.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
-const AvatarExampleSrcShorthand = () => <Avatar src="/public/images/avatar/small/matt.jpg" />
+const AvatarExampleSrcShorthand = () => <Avatar src="public/images/avatar/small/matt.jpg" />
 
 export default AvatarExampleSrcShorthand
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
index 27c68659a0..ac743e6064 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
@@ -4,37 +4,37 @@ import { Avatar } from '@stardust-ui/react'
 const AvatarExampleStatusShorthand = () => (
   <div style={{ background: 'white' }}>
     <Avatar
-      src="/public/images/avatar/small/matt.jpg"
+      src="public/images/avatar/small/matt.jpg"
       status="Available"
       style={{ marginRight: '15px' }}
     />
     <Avatar
-      src="/public/images/avatar/small/matt.jpg"
+      src="public/images/avatar/small/matt.jpg"
       status="Busy"
       style={{ marginRight: '15px' }}
     />
     <Avatar
-      src="/public/images/avatar/small/matt.jpg"
+      src="public/images/avatar/small/matt.jpg"
       status="DoNotDisturb"
       style={{ marginRight: '15px' }}
     />
     <Avatar
-      src="/public/images/avatar/small/matt.jpg"
+      src="public/images/avatar/small/matt.jpg"
       status="Away"
       style={{ marginRight: '15px' }}
     />
     <Avatar
-      src="/public/images/avatar/small/matt.jpg"
+      src="public/images/avatar/small/matt.jpg"
       status="BeRightBack"
       style={{ marginRight: '15px' }}
     />
     <Avatar
-      src="/public/images/avatar/small/matt.jpg"
+      src="public/images/avatar/small/matt.jpg"
       status="Offline"
       style={{ marginRight: '15px' }}
     />
     <Avatar
-      src="/public/images/avatar/small/matt.jpg"
+      src="public/images/avatar/small/matt.jpg"
       status="PresenceUnknown"
       style={{ marginRight: '15px' }}
     />

From b2b0f875d657574864eab419784d2588a7ddf131 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 1 Aug 2018 11:42:48 +0200
Subject: [PATCH 04/14] -added variables prop to the Label component

---
 src/components/Label/Label.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index e4e8e2e8ce..ff621bd00f 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -31,9 +31,12 @@ class Label extends UIComponent<any, any> {
 
     /** Shorthand for primary content. */
     content: customPropTypes.contentShorthand,
+
+    /** Function for overriding the variables for the component. */
+    variables: PropTypes.func,
   }
 
-  static handledProps = ['as', 'children', 'circular', 'className', 'content']
+  static handledProps = ['as', 'children', 'circular', 'className', 'content', 'variables']
 
   static defaultProps = {
     as: 'label',

From 799677e90806aa2c61805801a59d40cf6505e1d3 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 1 Aug 2018 12:05:00 +0200
Subject: [PATCH 05/14] -added props interface to the Label component

---
 src/components/Label/Label.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index ff621bd00f..350e52c3c6 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -1,15 +1,20 @@
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { HTMLAttributes, ReactNode } from 'react'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 
 import labelRules from './labelRules'
 import labelVariables from './labelVariables'
 
+export interface LabelProps extends HTMLAttributes<HTMLElement> {
+  circular?: boolean
+  content?: ReactNode
+}
+
 /**
  * A label displays content classification
  */
-class Label extends UIComponent<any, any> {
+class Label extends UIComponent<LabelProps, any> {
   static displayName = 'Label'
 
   static create: Function

From 4800164db99e8d2ef3b334fc6341dce5353c0c3e Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 1 Aug 2018 12:14:27 +0200
Subject: [PATCH 06/14] -fixes

---
 src/components/Icon/Icon.tsx   | 4 ++--
 src/components/Label/Label.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
index b88f1bca0d..7f4f6f13c1 100644
--- a/src/components/Icon/Icon.tsx
+++ b/src/components/Icon/Icon.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React from 'react'
 import PropTypes from 'prop-types'
 import { customPropTypes, UIComponent, SUI } from '../../lib'
 
@@ -25,7 +25,7 @@ export type IconSize = 'mini' | 'tiny' | 'small' | 'large' | 'big' | 'huge' | 'm
 
 export type IconXSpacing = 'none' | 'before' | 'after' | 'both'
 
-export interface IconProps extends HTMLAttributes<HTMLElement> {
+export interface IconProps {
   bordered?: boolean
   circular?: boolean
   color?: IconColor
diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index 350e52c3c6..c79fad9e89 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -6,7 +6,7 @@ import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } f
 import labelRules from './labelRules'
 import labelVariables from './labelVariables'
 
-export interface LabelProps extends HTMLAttributes<HTMLElement> {
+export interface LabelProps {
   circular?: boolean
   content?: ReactNode
 }

From 0fc3605eea7d3593f9bfb0df8ba7ea16406b3945 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 1 Aug 2018 14:38:24 +0200
Subject: [PATCH 07/14] -reverted changes in the avatar examples

---
 .../Variations/AvatarExampleAlt.shorthand.tsx      |  2 +-
 .../Variations/AvatarExampleSize.shorthand.tsx     |  2 +-
 .../Variations/AvatarExampleSrc.shorthand.tsx      |  2 +-
 .../Variations/AvatarExampleStatus.shorthand.tsx   | 14 +++++++-------
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleAlt.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleAlt.shorthand.tsx
index 842ac34ca2..ab1dce3397 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleAlt.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleAlt.shorthand.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
 const AvatarExampleAltShorthand = () => (
-  <Avatar src="public/images/avatar/small/matt.jpg" alt="Profile picture of Matt" />
+  <Avatar src="/public/images/avatar/small/matt.jpg" alt="Profile picture of Matt" />
 )
 
 export default AvatarExampleAltShorthand
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx
index 6a24b498f3..9842145d24 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx
@@ -11,7 +11,7 @@ const AvatarExampleSizeShorthand = () =>
         <Avatar
           key={size}
           size={size}
-          src="public/images/avatar/small/matt.jpg"
+          src="/public/images/avatar/small/matt.jpg"
           status="Available"
         />
       </div>
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleSrc.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleSrc.shorthand.tsx
index 9e7792d8b1..0a65e19232 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleSrc.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleSrc.shorthand.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
-const AvatarExampleSrcShorthand = () => <Avatar src="public/images/avatar/small/matt.jpg" />
+const AvatarExampleSrcShorthand = () => <Avatar src="/public/images/avatar/small/matt.jpg" />
 
 export default AvatarExampleSrcShorthand
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
index ac743e6064..27c68659a0 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
@@ -4,37 +4,37 @@ import { Avatar } from '@stardust-ui/react'
 const AvatarExampleStatusShorthand = () => (
   <div style={{ background: 'white' }}>
     <Avatar
-      src="public/images/avatar/small/matt.jpg"
+      src="/public/images/avatar/small/matt.jpg"
       status="Available"
       style={{ marginRight: '15px' }}
     />
     <Avatar
-      src="public/images/avatar/small/matt.jpg"
+      src="/public/images/avatar/small/matt.jpg"
       status="Busy"
       style={{ marginRight: '15px' }}
     />
     <Avatar
-      src="public/images/avatar/small/matt.jpg"
+      src="/public/images/avatar/small/matt.jpg"
       status="DoNotDisturb"
       style={{ marginRight: '15px' }}
     />
     <Avatar
-      src="public/images/avatar/small/matt.jpg"
+      src="/public/images/avatar/small/matt.jpg"
       status="Away"
       style={{ marginRight: '15px' }}
     />
     <Avatar
-      src="public/images/avatar/small/matt.jpg"
+      src="/public/images/avatar/small/matt.jpg"
       status="BeRightBack"
       style={{ marginRight: '15px' }}
     />
     <Avatar
-      src="public/images/avatar/small/matt.jpg"
+      src="/public/images/avatar/small/matt.jpg"
       status="Offline"
       style={{ marginRight: '15px' }}
     />
     <Avatar
-      src="public/images/avatar/small/matt.jpg"
+      src="/public/images/avatar/small/matt.jpg"
       status="PresenceUnknown"
       style={{ marginRight: '15px' }}
     />

From 9a39575ab0e3a3c34c2a285d5a62be1444d5676d Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 1 Aug 2018 19:01:51 +0200
Subject: [PATCH 08/14] -fixed variables type to work with object too

---
 src/components/Avatar/Avatar.tsx | 4 ++--
 src/lib/UIComponent.tsx          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
index 43a493e193..c2166616f5 100644
--- a/src/components/Avatar/Avatar.tsx
+++ b/src/components/Avatar/Avatar.tsx
@@ -100,7 +100,7 @@ class Avatar extends UIComponent<any, any> {
             className={classes.avatarLabel}
             as="div"
             content={this.getInitials(name)}
-            variables={() => ({ padding: '0px' })}
+            variables={{ padding: '0px' }}
             circular
             title={name}
           />
@@ -110,7 +110,7 @@ class Avatar extends UIComponent<any, any> {
             <Label
               className={classes.presenceIconLabel}
               as="div"
-              variables={() => ({ padding: '0px' })}
+              variables={{ padding: '0px' }}
               style={{ background: color }}
               circular
               title={name}
diff --git a/src/lib/UIComponent.tsx b/src/lib/UIComponent.tsx
index c8db72084c..800f133215 100644
--- a/src/lib/UIComponent.tsx
+++ b/src/lib/UIComponent.tsx
@@ -3,7 +3,7 @@ import renderComponent, { IRenderResultConfig } from './renderComponent'
 
 export interface UIComponentProps extends HTMLAttributes<HTMLElement> {
   as?: string | Function
-  variables?: (siteVariables: object) => object
+  variables?: ((siteVariables: object) => object) | object
 }
 
 class UIComponent<P, S> extends React.Component<P & UIComponentProps, S> {

From c2e377fe5e9d6e19b81deb052d3199e7208fe9bf Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 1 Aug 2018 19:08:33 +0200
Subject: [PATCH 09/14] -changed the PropTypes in the Label component

---
 src/components/Label/Label.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Label/Label.tsx b/src/components/Label/Label.tsx
index c79fad9e89..903d2b9493 100644
--- a/src/components/Label/Label.tsx
+++ b/src/components/Label/Label.tsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { HTMLAttributes, ReactNode } from 'react'
+import React, { ReactNode } from 'react'
 
 import { childrenExist, createShorthandFactory, customPropTypes, UIComponent } from '../../lib'
 
@@ -37,8 +37,8 @@ class Label extends UIComponent<LabelProps, any> {
     /** Shorthand for primary content. */
     content: customPropTypes.contentShorthand,
 
-    /** Function for overriding the variables for the component. */
-    variables: PropTypes.func,
+    /** Function or object for overriding the variables for the component. */
+    variables: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   }
 
   static handledProps = ['as', 'children', 'circular', 'className', 'content', 'variables']

From da7abe404f58b6209a5cee8e9b792fbcbbac5b61 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 23 Aug 2018 14:23:52 +0200
Subject: [PATCH 10/14] -added props interface for the accordion component

---
 src/components/Accordion/Accordion.tsx | 49 +++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index d3208db1ea..03d3a3b0bd 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -8,12 +8,59 @@ import AccordionContent from './AccordionContent'
 import { DefaultBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/interfaces'
 
+export interface IAccordionPropsStrict {
+  /** An element type to render as (string or function). */
+  as?: any
+
+  /** Index of the currently active panel. */
+  activeIndex?: number[] | number
+
+  /** Primary content. */
+  children?: React.ReactNode
+
+  /** Additional classes. */
+  className?: string
+
+  /** Initial activeIndex value. */
+  defaultActiveIndex?: number[] | number
+
+  /** Only allow one panel open at a time. */
+  exclusive?: boolean
+
+  /**
+   * Called when a panel title is clicked.
+   *
+   * @param {SyntheticEvent} event - React's original SyntheticEvent.
+   * @param {object} data - All item props.
+   */
+  onTitleClick?: Function
+
+  /** Shorthand array of props for Accordion. */
+  panels?: {
+    content: React.ReactNode | object
+    title: React.ReactNode | object
+  }[]
+
+  /** Accessibility behavior if overridden by the user. */
+  accessibility?: object | Function
+
+  /** Custom styles to be applied for component. */
+  styles?: object | Function
+
+  /** Custom variables to be applied for component. */
+  variables?: object | Function
+}
+
+export interface IAccordionProps extends IAccordionPropsStrict {
+  [key: string]: any
+}
+
 /**
  * A standard Accordion.
  * @accessibility
  * Concern: how do we optimally navigate through an Accordion element with nested children?
  */
-class Accordion extends AutoControlledComponent<any, any> {
+class Accordion extends AutoControlledComponent<IAccordionProps, any> {
   static displayName = 'Accordion'
 
   static className = 'ui-accordion'

From 21f79e461bd2518d3566e7cabc5f49da6e59aa71 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 23 Aug 2018 15:27:09 +0200
Subject: [PATCH 11/14] -extracting NotStringProps generic type

---
 src/components/Accordion/Accordion.tsx | 5 ++---
 src/lib/NotStrictProps.ts              | 3 +++
 2 files changed, 5 insertions(+), 3 deletions(-)
 create mode 100644 src/lib/NotStrictProps.ts

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 03d3a3b0bd..bf1e34cb1a 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -7,6 +7,7 @@ import AccordionTitle from './AccordionTitle'
 import AccordionContent from './AccordionContent'
 import { DefaultBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/interfaces'
+import { NotStrictProps } from '../../lib/NotStrictProps'
 
 export interface IAccordionPropsStrict {
   /** An element type to render as (string or function). */
@@ -51,9 +52,7 @@ export interface IAccordionPropsStrict {
   variables?: object | Function
 }
 
-export interface IAccordionProps extends IAccordionPropsStrict {
-  [key: string]: any
-}
+export type IAccordionProps = NotStrictProps<IAccordionPropsStrict>
 
 /**
  * A standard Accordion.
diff --git a/src/lib/NotStrictProps.ts b/src/lib/NotStrictProps.ts
new file mode 100644
index 0000000000..6f5b5ebdf0
--- /dev/null
+++ b/src/lib/NotStrictProps.ts
@@ -0,0 +1,3 @@
+export type NotStrictProps<T> = T & {
+  [key: string]: any
+}

From bc5fdd3b7ae2d350cc6c6c7f0895bb80517d0249 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 23 Aug 2018 15:35:14 +0200
Subject: [PATCH 12/14] -more specific function definition for the Accordion
 onTitleClick property

---
 src/components/Accordion/Accordion.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index bf1e34cb1a..077c310e01 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -34,7 +34,7 @@ export interface IAccordionPropsStrict {
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
    * @param {object} data - All item props.
    */
-  onTitleClick?: Function
+  onTitleClick?: (event: React.SyntheticEvent, data: IAccordionProps) => void
 
   /** Shorthand array of props for Accordion. */
   panels?: {

From a517d5168c3d6d8e8b996c12cedef1091d09787c Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 24 Aug 2018 11:10:09 +0200
Subject: [PATCH 13/14] -updated types for the variables and styles

---
 src/components/Accordion/Accordion.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 077c310e01..e69889cc72 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -8,6 +8,7 @@ import AccordionContent from './AccordionContent'
 import { DefaultBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/interfaces'
 import { NotStrictProps } from '../../lib/NotStrictProps'
+import { ComponentVariablesInput, IComponentPartStylesInput } from '../../../types/theme'
 
 export interface IAccordionPropsStrict {
   /** An element type to render as (string or function). */
@@ -46,10 +47,10 @@ export interface IAccordionPropsStrict {
   accessibility?: object | Function
 
   /** Custom styles to be applied for component. */
-  styles?: object | Function
+  styles?: IComponentPartStylesInput
 
   /** Custom variables to be applied for component. */
-  variables?: object | Function
+  variables?: ComponentVariablesInput
 }
 
 export type IAccordionProps = NotStrictProps<IAccordionPropsStrict>

From 276a8c622a76eaa21170ffe7c22e0cc76ebf346b Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Fri, 24 Aug 2018 11:20:04 +0200
Subject: [PATCH 14/14] -removing children from prop interface

---
 src/components/Accordion/Accordion.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index e69889cc72..48adfc8ff3 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -17,9 +17,6 @@ export interface IAccordionPropsStrict {
   /** Index of the currently active panel. */
   activeIndex?: number[] | number
 
-  /** Primary content. */
-  children?: React.ReactNode
-
   /** Additional classes. */
   className?: string