feat(icon): add support to size and color

Co-authored-by: @jimmyandrade @lauralucca

src/common/themeSelectors/colors/colors.ts

@@ -22,3 +22,5 @@ export const getColorHighEmphasis = (theme: Theme) => getColors(theme).colorHigh
 export const getColorSurface = (theme: Theme) => getColors(theme).colorSurface;
 
 export const getColorHighlight = (theme: Theme) => getColors(theme).colorHighlight;
+
+export const getColorByName = (theme: Theme, colorName: string) => getColors(theme)[colorName];

src/components/Icon/Icon.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { select, text } from '@storybook/addon-knobs';
 
 import { ContainerRow } from '../../common/HelperComponents/ThemeHelper.styles';
-import { Icon, IconColors } from './Icon';
+import { Icon, IconColors, IconSizes } from './Icon';
 
 export default {
   component: Icon,
@@ -14,22 +14,69 @@ export default {
 
 export const all = () => (
   <ContainerRow style={{ justifyContent: 'space-around', padding: 20 }}>
+    <Icon />
     <Icon color="primary" />
     <Icon color="primary" name="filled-action-add" />
     <Icon color="default" name="filled-action-add" />
   </ContainerRow>
 );
 
+/* eslint-disable sort-keys */
 const iconColors = {
   default: 'default',
   primary: 'primary',
+  onPrimary: 'onPrimary',
+  primaryLight: 'primaryLight',
+  onPrimaryLight: 'onPrimaryLight',
+  primaryDark: 'primaryDark',
+  onPrimaryDark: 'onPrimaryDark',
+  secondary: 'secondary',
+  onSecondary: 'onSecondary',
+  secondaryLight: 'secondaryLight',
+  onSecondaryLight: 'onSecondaryLight',
+  secondaryDark: 'secondaryDark',
+  onSecondaryDark: 'onSecondaryDark',
+  background: 'background',
+  onBackground: 'onBackground',
+  surface: 'surface',
+  onSurface: 'onSurface',
+  highlight: 'highlight',
+  highEmphasis: 'highEmphasis',
+  mediumEmphasis: 'mediumEmphasis',
+  lowEmphasis: 'lowEmphasis',
+  link: 'link',
+  onLink: 'onLink',
+  success: 'success',
+  onSuccess: 'onSuccess',
+  warning: 'warning',
+  onWarning: 'onWarning',
+  alert: 'alert',
+  onAlert: 'onAlert',
 };
+/* eslint-enable sort-keys */
+
+/* eslint-disable sort-keys */
+const iconSizes = {
+  micro: 'micro',
+  tiny: 'tiny',
+  small: 'small',
+  standard: 'standard',
+  medium: 'medium',
+  large: 'large',
+  largex: 'largex',
+  largexx: 'largexx',
+  huge: 'huge',
+  hugex: 'hugex',
+  hugexx: 'hugexx',
+};
+/* eslint-enable sort-keys */
 
 export const interactive = () => (
   <ContainerRow style={{ padding: 20 }} >
     <Icon
       color={select('Colors', iconColors, 'default') as IconColors}
       name={text('Icon name', 'outlined-default-mockup')}
+      size={select('Sizes', iconSizes, 'standard') as IconSizes}
     />
   </ContainerRow>
 );

src/components/Icon/Icon.tsx

@@ -1,12 +1,40 @@
 import React from 'react';
 import { withTheme } from 'styled-components/native';
 import { Text } from 'react-native';
-
 import iconNames from '@naturacosmeticos/natds-icons/dist/natds-icons.json';
-import { Theme } from '../../common/themeSelectors';
+import { ISizes } from '@naturacosmeticos/natds-styles';
+import { Theme, getColorByName } from '../../common/themeSelectors';
 
-export type IconColors = 'default' | 'primary'
-export type IconSizes = 'small' | 'medium'
+export type IconColors = 'default'
+                        | 'primary'
+                        | 'onPrimary'
+                        | 'primaryLight'
+                        | 'onPrimaryLight'
+                        | 'primaryDark'
+                        | 'onPrimaryDark'
+                        | 'secondary'
+                        | 'onSecondary'
+                        | 'secondaryLight'
+                        | 'onSecondaryLight'
+                        | 'secondaryDark'
+                        | 'onSecondaryDark'
+                        | 'background'
+                        | 'onBackground'
+                        | 'surface'
+                        | 'onSurface'
+                        | 'highlight'
+                        | 'highEmphasis'
+                        | 'mediumEmphasis'
+                        | 'lowEmphasis'
+                        | 'link'
+                        | 'onLink'
+                        | 'success'
+                        | 'onSuccess'
+                        | 'warning'
+                        | 'onWarning'
+                        | 'alert'
+                        | 'onAlert'
+export type IconSizes = keyof ISizes
 
 export interface IconProps {
   /**
@@ -21,13 +49,17 @@ export interface IconProps {
    */
   accessibilityLabel?: string
   /**
-   * Icon variants `default` | `primary`
+   * Icon color tokens
    */
   color?: IconColors,
   /**
    * Icon name
    */
   name?: string
+  /**
+   * Icon size
+   */
+  size?: IconSizes
   /**
    * Optional ID for testing
    */
@@ -40,15 +72,13 @@ export interface IconProps {
 
 const defaultIconName = 'outlined-default-mockup';
 
-const getIconSize = theme => theme.sizes.standard;
+const getIconSize = (theme: Theme, size: IconSizes) => theme.sizes[size];
 
-const getFontColor = (theme, color) => {
-  const translatedColor = {
-    default: 'colorHighEmphasis',
-    primary: 'colorPrimary',
-  }[color];
+const getFontColor = (theme: Theme, color: IconColors) => {
+  const colorName = color === 'default' ? 'highEmphasis' : color;
+  const colorToken = `color${colorName.charAt(0).toUpperCase()}${colorName.slice(1)}`;
 
-  return theme.colorTokens[translatedColor];
+  return getColorByName(theme, colorToken);
 };
 
 const IconComponent = ({
@@ -58,6 +88,7 @@ const IconComponent = ({
   name = defaultIconName,
   testID = `icon-${name}`,
   theme,
+  size = 'standard',
 }: IconProps) => {
   const unicodeName = iconNames[name]
     ? iconNames[name].replace('%', '\\')
@@ -73,7 +104,7 @@ const IconComponent = ({
       style={{
         color: getFontColor(theme, color),
         fontFamily: 'natds-icons',
-        fontSize: getIconSize(theme),
+        fontSize: getIconSize(theme, size),
       }}
       testID={testID}
     >