Fix height prop to work with rem

[taysea]

Closes #346. If unit is rem, when we parseMetricToNum we need to multiply by 16 to appropriately calculate padding.

Tested locally in storybook and added unit test.

import React from 'react';
import { boolean, text } from '@storybook/addon-knobs';

import { ThemeProvider } from 'styled-components';
import { Box, Text, Grommet } from 'grommet';
import * as Icons from './icons';

const customTheme = {
  global: {
    colors: {
      icon: '#2196f3',
      attention: '#ff3333',
    },
  },
  icon: {
    size: {
      small: '12px',
      medium: '18px',
      large: '48px',
      xlarge: '300px',
    },
  },
  text: {
    small: {
      size: '0.75rem',
      height: '0.875rem',
    },
    medium: {
      size: '1.125rem',
      height: '1.5rem',
    },
  },
};

export default {
  title: 'Icon',
};

export const Default = () => {
  const Icon = Icons[text('Icon', 'Accessibility')];
  if (!Icon) {
    return null;
  }
  return <Icon />;
};

export const Color = () => {
  const Icon = Icons[text('Icon', 'Accessibility')];
  if (!Icon) {
    return null;
  }
  const theme = JSON.parse(JSON.stringify(customTheme));
  theme.icon.disableScaleDown = boolean('disableScaleDown', false);
  return (
    <ThemeProvider theme={theme}>
      <Icon size={text('Size', 'xlarge')} color={text('Color', 'attention')} />
    </ThemeProvider>
  );
};

export const Plain = () => <Icons.Pocket color="plain" />;

export const CustomTheme = () => {
  const Icon = Icons[text('Icon', 'Accessibility')];
  if (!Icon) {
    return null;
  }
  const theme = JSON.parse(JSON.stringify(customTheme));
  theme.icon.disableScaleDown = boolean('disableScaleDown', false);
  return (
    <Grommet theme={theme}>
      <Box direction="row">
        <Icon size={text('Size', 'medium')} height="medium" />
        <Text>Here is some text I want my icon to align with.</Text>
      </Box>
    </Grommet>
  );
};

[halocline]

Why do we need both the regex and the || for px? I would think the regex would match both rem and px -- also I would think this would match any a-z chars such as em,ft, even zebra.

Should we make the regex a bit more targeted to the specific units which are valid/we support?

[taysea]

Made adjustments in latest commit.

[halocline]

Where does the 16 come from? Assuming this assumes and 16px root? Can we document this with a comment and/or a static variable (e.g. const ROOT_UNIT = 16 or ROOT_ELEMENT)?

[taysea]

Made adjustments in latest commit. It is worth noting, this PR does enhance height to work with rem but additional enhancements would be required to make it work with em because we'd need to pass in the parent element node to get its font-size. I think we should leave that for separate work.