TASK: resolve //TODOs

packages/react-ui-components/src/Button/button.tsx

@@ -1,7 +1,7 @@
 import mergeClassNames from 'classnames';
 import React from 'react';
 
-import {PickDefaultProps} from '../../types';
+import {Omit, PickDefaultProps} from '../../types';
 import {makeFocusNode} from '../_lib/focusNode';
 
 export type ButtonStyle = 'clean' | 'brand' | 'lighter' | 'transparent' | 'warn';
@@ -14,15 +14,13 @@ interface ButtonTheme {
     readonly 'btn--lighter': string;
     readonly 'btn--transparent': string;
     readonly 'btn--brand': string;
+    readonly 'btn--brandActive': string;
     readonly 'btn--brandHover': string;
     readonly 'btn--cleanHover': string;
     readonly 'btn--isPressed': string;
     readonly 'btn--darkenHover': string;
-    readonly [key: string]: string; // TODO: this should be removed and be replaced with the actual css class override
 }
 
-type Diff<T, U> = T extends U ? never : T;
-type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;
 // We omit the standard HTML button style attribute,
 // so we have no collision with the Button component's style property,
 // while still enjoying the intellisense and type checking for the rest of the HTML button attributes
@@ -133,8 +131,11 @@ class Button extends React.PureComponent<ButtonProps> {
         const effectiveHoverStyle = isActive ? 'brand' : hoverStyle;
         const finalClassName = mergeClassNames(
             theme!.btn,
+            // @ts-ignore implizit any because ButtonTheme has no index signature
             theme![`btn--size-${size}`],
+            // @ts-ignore implizit any because ButtonTheme has no index signature
             theme![`btn--${effectiveStyle!}`],
+            // @ts-ignore implizit any because ButtonTheme has no index signature
             theme![`btn--${effectiveHoverStyle!}Hover`],
             {
                 [theme!['btn--brandActive']]: isActive,

packages/react-ui-components/src/CheckBox/checkBox.tsx

@@ -45,15 +45,19 @@ class CheckBox extends PureComponent<CheckBoxProps> {
             theme,
             ...rest
         } = this.props;
-        const finalClassName = mergeClassNames({
-            [className!]: className && className.length,
-            [theme.checkbox]: true,
-            [theme.checkbox__disabled]: isDisabled
-        });
-        const mirrorClassNames = mergeClassNames({
-            [theme.checkbox__inputMirror]: true,
-            [theme['checkbox__inputMirror--active']]: isChecked
-        });
+        const finalClassName = mergeClassNames(
+            className,
+            theme.checkbox,
+            {
+                [theme.checkbox__disabled]: isDisabled,
+            }
+        );
+        const mirrorClassNames = mergeClassNames(
+            theme.checkbox__inputMirror,
+            {
+                [theme['checkbox__inputMirror--active']]: isChecked,
+            }
+        );
 
         return (
             <div className={finalClassName}>

packages/react-ui-components/src/Headline/headline.tsx

@@ -51,7 +51,7 @@ class Headline extends PureComponent<HeadlineProps> {
             className,
             children,
             theme,
-            style, // TODO: not used
+            style, // TODO: Discuss what this style prop should do.
             ...rest
         } = this.props;
         const classNames = mergeClassNames(theme!.heading, theme!['heading--h1'], className);

packages/react-ui-components/src/Icon/icon.tsx

@@ -17,7 +17,9 @@ interface IconTheme {
     readonly 'icon--paddedLeft': string;
     readonly 'icon--paddedRight': string;
     readonly 'icon--spin': string;
-    readonly [key: string]: string;
+    readonly 'icon--color-warn': string;
+    readonly 'icon--color-error': string;
+    readonly 'icon--color-primaryBlue': string;
 }
 
 export interface IconProps {

packages/react-ui-components/src/IconButton/iconButton.tsx

@@ -8,7 +8,7 @@ import {IconProps} from '../Icon/icon';
 
 interface IconButtonTheme {
     readonly 'iconButton': string;
-    readonly [key: string]: string;
+    readonly 'iconButton--disabled': string;
 }
 
 interface IconButtonProps {
@@ -74,6 +74,7 @@ class IconButton extends PureComponent<IconButtonProps> {
         const finalClassName = mergeClassNames(
             className,
             theme!.iconButton,
+            // @ts-ignore implizit any because IconButtonTheme has no index signature
             theme![`size-${size}`],
             {
                 [theme!['iconButton--disabled']]: disabled

packages/react-ui-components/src/IconButton/index.js

@@ -12,7 +12,6 @@ import injectProps from './../_lib/injectProps';
 import Icon from './../Icon';
 import Button from './../Button';
 
-// TODO why?
 export default injectProps({
     IconComponent: Icon,
     ButtonComponent: Button

packages/react-ui-components/src/IconButtonDropDown/dropDownItem.tsx

@@ -3,7 +3,6 @@ import React, {PureComponent} from 'react';
 type DropDownItemId = string;
 
 interface DropDownItemProps {
-    // TODO: think about declaring currying the function with the id in the parent component/container
     /**
      * The handler to call when clicking on the item of the DropDown.
      */
@@ -31,7 +30,7 @@ class DropDownItem extends PureComponent<DropDownItemProps> {
                 {...rest}
                 role="button"
                 onClick={this.handleClick}
-                >
+            >
                 {children}
             </a>
         );

packages/react-ui-components/src/IconButtonDropDown/iconButtonDropDown.tsx

@@ -15,7 +15,7 @@ interface IconButtonDropDownTheme {
     readonly 'wrapper__dropDown': string;
     readonly 'wrapper__dropDown--isOpen': string;
     readonly 'wrapper__dropDownItem': string;
-    readonly [key: string]: string; // TODO should this be more restrictive?
+    readonly 'wrapper__btnIcon': string;
 }
 
 interface IconButtonDropDownProps {
@@ -24,7 +24,6 @@ interface IconButtonDropDownProps {
      */
     readonly icon: string;
 
-    // TODO: be more specific or use children as a function
     /**
      * Children to be rendered inside the DropDown.
      */
@@ -59,8 +58,6 @@ interface IconButtonDropDownProps {
      */
     readonly theme?: IconButtonDropDownTheme;
 
-    // TODO: This feels strange. We should just import the component classes here.
-    // also those interfaces should be exposed (export interface ...)
     /**
      * Static component dependencies which are injected from the outside (index.js)
      */
@@ -100,7 +97,6 @@ interface IconButtonDropDownState {
 }
 
 export default class IconButtonDropDown extends PureComponent<IconButtonDropDownProps, IconButtonDropDownState> {
-    // here we have to disable the tslint rule
     // tslint:disable:readonly-keyword
     private _timeouts: {
         hold?: number,
@@ -171,7 +167,7 @@ export default class IconButtonDropDown extends PureComponent<IconButtonDropDown
                             className={theme!.wrapper__dropDownItem}
                             onClick={this.handleItemSelected}
                             id={child.props.dropDownId}
-                            >
+                        >
                             {child}
                         </DropDownItem>
                     ))}

packages/react-ui-components/src/IconButtonDropDown/index.js

@@ -5,7 +5,6 @@ import IconButtonDropDown from './iconButtonDropDown';
 
 const ThemedIconButtonDropDown = themr(identifiers.iconButtonDropDown, style)(IconButtonDropDown);
 
-// TODO: why here?
 //
 // Dependency injection
 //

packages/react-ui-components/src/SideBar/sideBar.tsx

@@ -23,7 +23,7 @@ interface SideBarProps {
     /**
      * The children to render within the div node.
      */
-    readonly children: any; // TODO
+    readonly children: React.ReactNode;
 
     /**
      * An optional css theme to be injected.

packages/react-ui-components/types.d.ts

@@ -22,3 +22,8 @@
 export type PickDefaultProps<Props, defaultPropsKeys extends keyof Props> = Readonly<Required<{
     [P in defaultPropsKeys]: Props[P]
 }>>;
+
+
+export type Diff<T, U> = T extends U ? never : T;
+
+export type Omit<T, K extends keyof T> = Pick<T, Diff<keyof T, K>>;