Merge pull request #4 from exivity/input

Input

Author: Stefan Wullems

.storybook/config.js

@@ -1,4 +1,5 @@
-import  React from 'react'
+
+import * as React from 'react'
 import { configure } from '@storybook/react'
 import { addDecorator } from '@storybook/react'
 import { withThemesProvider } from 'storybook-addon-styled-component-theme'
@@ -7,6 +8,7 @@ import WebfontLoader from '@dr-kobros/react-webfont-loader'
 import theme from '../src/theme'
 import { fontConfig } from '../src/fontConfig'
 
+
 const styles = {
   display: 'flex',
   height: '100%',
@@ -33,6 +35,7 @@ addDecorator(withThemesProvider(themes))
 addDecorator(FontLoader)
 addDecorator(CenterDecorator)
 
+
 function loadStories() {
   require('../src/stories')
 }

jest.config.js

@@ -5,8 +5,10 @@
   "dependencies": {
     "@dr-kobros/react-webfont-loader": "^8.0.0",
     "@storybook/cli": "^5.0.0-rc.3",
+    "fontfaceobserver": "^2.1.0",
     "react": "^16.8.2",
     "react-dom": "^16.8.2",
+    "react-icons": "^3.4.0",
     "react-scripts": "2.1.5",
     "storybook-addon-styled-component-theme": "^1.1.1",
     "styled-components": "^4.1.3"
@@ -37,7 +39,9 @@
     "@types/enzyme": "^3.1.18",
     "@types/enzyme-adapter-react-16": "^1.0.4",
     "@types/jest": "^24.0.6",
+    "@types/react-icons": "^3.0.0",
     "@types/react-test-renderer": "^16.8.1",
+    "@types/storybook__addon-actions": "^3.4.2",
     "@types/styled-components": "^4.1.10",
     "babel-loader": "^8.0.5",
     "enzyme": "^3.9.0",

package.json

@@ -0,0 +1,44 @@
+import * as React from 'react'
+
+import styled from "styled-components";
+
+interface IBaseIconProps {
+  className?: string
+  extraClassName?: string
+  onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void
+  icon: JSX.Element
+}
+ 
+const BaseIcon: React.FC<IBaseIconProps> = ({ className, extraClassName, icon, onClick }) => {
+  return <span className={className + ' ' + extraClassName} onMouseDown={onClick}>{icon}</span>
+}
+
+export default styled(BaseIcon)`
+  cursor: auto;
+  font-family: ${props => `Material Icons, ${props.theme.global.font}`};
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;
+
+  line-height: 1;
+  vertical-align: middle;
+
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+ 
+`

src/components/atoms/Icon/BaseIcon.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { shallowWithTheme } from '../../../utils/testing/shallowWithTheme'
+import { MdAccountBalanceWallet } from 'react-icons/md'
+
+import Icon from './'
+
+test('renders icon', () => {
+  const button = shallowWithTheme(<Icon icon={<MdAccountBalanceWallet/>} onClick={() => { return }} />)
+  expect(button).toMatchSnapshot()
+})
+
+test('renders icon with subicon', () => {
+  const button = shallowWithTheme(<Icon icon={<MdAccountBalanceWallet/>} subIcon={<MdAccountBalanceWallet/>} onClick={() => { return }} />)
+  expect(button).toMatchSnapshot()
+})

src/components/atoms/Icon/Icon.test.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react'
+import styled, { css } from 'styled-components';
+import BaseIcon from './BaseIcon';
+
+interface IMainIconProps {
+  subIcon?: JSX.Element
+  icon: JSX.Element
+  className?: string
+  onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void
+}
+
+const MainIcon: React.FC<IMainIconProps> = ({ icon, className, onClick }) => {
+  return <BaseIcon extraClassName={className} icon={icon} onClick={onClick} />
+}
+
+export default styled(MainIcon)`
+  ${props => props.subIcon && css`
+    /* Zero out the line-height so that it doesn't
+      interfere with the positioning that follows */
+      line-height: 0;
+
+      /* Where the magic happens: makes all browsers position
+        the sup/sup properly, relative to the surrounding text */
+      position: relative;
+
+      /* Note that if you're using Eric Meyer's reset.css, this
+        is already set and you can remove this rule */
+      vertical-align: baseline;
+
+      /* Move the superscripted text up */
+      top: -.2em;
+
+      font-size: 16px;
+  `}
+  ${props => !props.children && props.subIcon && css`
+      width: 16px;
+      height: 16px;
+  `}
+`
+

src/components/atoms/Icon/MainIcon.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import styled from 'styled-components';
+import BaseIcon from './BaseIcon';
+
+interface ISubIconProps {
+  icon: JSX.Element
+  onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void
+  className?: string
+}
+
+const SubIcon: React.FC<ISubIconProps> = ({ icon, onClick, className }) => {
+  return <BaseIcon onClick={onClick} icon={icon} extraClassName={className} />
+}
+
+export default styled(SubIcon)`
+  /* Zero out the line-height so that it doesn't
+    interfere with the positioning that follows */
+  line-height: 0;
+
+  /* Where the magic happens: makes all browsers position
+    the sup/sup properly, relative to the surrounding text */
+  position: relative;
+
+  /* Note that if you're using Eric Meyer's reset.css, this
+    is already set and you can remove this rule */
+  vertical-align: baseline;
+
+  /* Move the subscripted text down, but only
+       half as far down as the superscript moved up */
+  bottom: -.3em;
+  margin-left: -.4em;
+
+  font-size: 10px;
+
+`