/**
 * Copyright 2017 CA
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/* @flow */
import React, { PureComponent } from 'react';
import { createStyledComponent, generateId } from '@mineral-ui/component-utils';

type Props = {
  /** Available sizes, including custom - e.g. '5em' or '20px' */
  size?: 'small' | 'medium' | 'large' | string,
  /** SVG content, required for the generic Icon component */
  children?: MnrlReactNode,
  /** Fill color, defaults to theme.color_gray_60 */
  color?: string,
  /** Flip the icon horizontally when used with RTL languages */
  rtl?: boolean,
  /** Alternative text */
  title?: string
};

const iconStyles = (props, baseTheme) => {
  const theme = {
    Icon_fill: baseTheme.color_gray_60,
    Icon_size_small: '2em',
    Icon_size_medium: '3em',
    Icon_size_large: '4em',
    ...baseTheme
  };

  return {
    fill: props.color || theme.Icon_fill,
    fontSize: theme.fontSize_base,
    height: theme[`Icon_size_${props.size}`] || props.size,
    transform: theme.direction === 'rtl' && props.rtl && 'scaleX(-1)',
    width: theme[`Icon_size_${props.size}`] || props.size
  };
};

const Root = createStyledComponent('svg', iconStyles, { rootEl: 'svg' });

/**
 * The Icon component displays a graphic symbol representing an object or function.
 *
 * The package provides a large number of prepackaged icon components as well
 * as a generic icon component to which you can provide your own SVG.
 */
export default class Icon extends PureComponent {
  static displayName = 'Icon';

  static defaultProps: Object = {
    size: 'medium'
  };

  props: Props;

  uniqueId: string = generateId();

  render() {
    const { size, title, children, ...restProps } = this.props;
    const titleElementId = `Icon-title-${this.uniqueId}`;
    const rootProps = {
      'aria-hidden': title ? null : true,
      'aria-labelledby': title && titleElementId,
      role: 'icon',
      size,
      viewBox: '0 0 24 24',
      ...restProps
    };

    const titleProps = {
      id: titleElementId
    };

    return (
      <Root {...rootProps}>
        {title && <title {...titleProps}>{title}</title>}
        {children}
      </Root>
    );
  }
}

@@ -646,16 +646,18 @@
 import %7B
+%0A 
  createS
@@ -671,16 +671,28 @@
 mponent,
+%0A  pxToEm,%0A 
  generat
@@ -694,17 +694,17 @@
 nerateId
- 
+%0A
 %7D from '
@@ -1279,13 +1279,18 @@
 ll: 
-'2em'
+pxToEm(12)
 ,%0A  
@@ -1313,13 +1313,18 @@
 um: 
-'3em'
+pxToEm(16)
 ,%0A  
@@ -1346,13 +1346,18 @@
 ge: 
-'4em'
+pxToEm(20)
 ,%0A  

Update sizes