Backtracking on styled-components (#319)

* revert: backtrack on styled-components, too chonk

* chore: prettier

Author: mcataford

package.json

@@ -22,8 +22,7 @@
   "main": "dist/main.js",
   "peerDependencies": {
     "react": ">15.4.2 <17.0.0",
-    "react-dom": ">15.4.2 <17.0.0",
-    "styled-components": "^4.0.0"
+    "react-dom": ">15.4.2 <17.0.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",
@@ -92,7 +91,6 @@
     "sass-loader": "^7.1.0",
     "sinon": "^1.17.4",
     "storybook-addon-react-docgen": "^1.0.4",
-    "styled-components": "^4.0.0",
     "style-loader": "^0.23.1",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "url-loader": "^1.1.2",

src/components/CountryList.js

@@ -1,11 +1,9 @@
-
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import utils from './utils';
 
 import FlagBox from './FlagBox';
-import { Divider } from './CountryList.styles'
 
 export default class CountryList extends Component {
   static propTypes = {
@@ -32,7 +30,7 @@ export default class CountryList extends Component {
   }
 
   setDropdownPosition = () => {
-    this.listElement.classList.remove('hide')
+    this.listElement.classList.remove('hide');
     const inputTop = this.props.inputTop;
     const windowTop =
       window.pageYOffset !== undefined
@@ -60,7 +58,7 @@ export default class CountryList extends Component {
         : '';
 
     this.listElement.style.top = cssTop;
-    this.listElement.classList.remove('v-hide')
+    this.listElement.classList.remove('v-hide');
   };
 
   appendListItem = (countries, isPreferred = false) => {
@@ -116,6 +114,7 @@ export default class CountryList extends Component {
 
     const preferredOptions = this.appendListItem(preferredCountries, true);
     const allOptions = this.appendListItem(countries);
+    const divider = <div className="divider" />;
 
     return (
       <ul
@@ -125,7 +124,7 @@ export default class CountryList extends Component {
         className={className}
       >
         {preferredOptions}
-        {preferredCountries.length > 0 ? <Divider /> : null}
+        {preferredCountries.length > 0 ? divider : null}
         {allOptions}
       </ul>
     );

src/components/CountryList.styles.js

@@ -4,12 +4,6 @@ import classNames from 'classnames';
 import CountryList from './CountryList';
 import RootModal from './RootModal';
 
-import {
-  DownArrow,
-  UpArrow,
-  SelectedFlagPopoverButton,
-} from './FlagDropDown.styles';
-
 export default class FlagDropDown extends Component {
   static propTypes = {
     allowDropdown: PropTypes.bool,
@@ -42,9 +36,9 @@ export default class FlagDropDown extends Component {
 
   genArrow = () => {
     const { allowDropdown, showDropdown } = this.props;
-    const arrow = showDropdown ? <UpArrow /> : <DownArrow />;
+    const arrowClasses = classNames('arrow', showDropdown ? 'up' : 'down');
 
-    return allowDropdown ? arrow : null;
+    return allowDropdown ? <div className={arrowClasses} /> : null;
   };
 
   genFlagClassName = () =>
@@ -99,7 +93,7 @@ export default class FlagDropDown extends Component {
 
     return (
       <div ref={refCallback} className="flag-container">
-        <SelectedFlagPopoverButton
+        <div
           className="selected-flag"
           tabIndex={allowDropdown ? '0' : ''}
           onClick={clickSelectedFlag}
@@ -109,7 +103,7 @@ export default class FlagDropDown extends Component {
           <div className={this.genFlagClassName()} />
           {this.genSelectedDialCode()}
           {this.genArrow()}
-        </SelectedFlagPopoverButton>
+        </div>
         {dropdownContainer && showDropdown ? (
           <RootModal>{this.genCountryList()}</RootModal>
         ) : (

src/components/FlagDropDown.js

@@ -7,7 +7,7 @@ import AllCountries from './AllCountries';
 import FlagDropDown from './FlagDropDown';
 import TelInput from './TelInput';
 import utils from './utils';
-import { KEYS } from './constants'
+import { KEYS } from './constants';
 import '../styles/intlTelInput.scss';
 
 const mobileUserAgentRegexp = /Android.+Mobile|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
@@ -1017,7 +1017,7 @@ class IntlTelInput extends Component {
     this.wrapperClass['separate-dial-code'] = this.props.separateDialCode;
 
     if (this.isMobile && this.props.useMobileFullscreenDropdown) {
-      document.querySelector('body').classList.add('iti-mobile')
+      document.querySelector('body').classList.add('iti-mobile');
       // on mobile, we want a full screen dropdown, so we must append it to the body
       this.dropdownContainer = 'body';
       window.addEventListener('scroll', this.handleWindowScroll);

src/components/FlagDropDown.styles.js

@@ -170,7 +170,7 @@ export default {
 
     return {};
   },
-  
+
   findIndex(items, predicate) {
     let index = -1;
 

src/components/IntlTelInput.js

@@ -75,6 +75,20 @@ $mobilePopupMargin: 30px;
     right: 0;
     // prevent the highlighted child from overlapping the input border
     padding: $borderWidth;
+  
+    .arrow {
+        font-size: 6px;
+        margin-left: 5px;
+        
+        &.up:after {
+            content: '▲';
+        }
+
+        &.down:after {
+            content: '▼';
+
+        }
+    }
   }
 
   .selected-flag {
@@ -85,6 +99,10 @@ $mobilePopupMargin: 30px;
     // this must be full-height both for the hover highlight, and to push down the
     // dropdown so it appears below the input
     height: 100%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   // the dropdown
@@ -97,6 +115,12 @@ $mobilePopupMargin: 30px;
     list-style: none;
     // in case any container has text-align:center
     text-align: left;
+    
+    .divider {
+        padding-bottom: 5px;
+        margin-bottom: 5px;
+        border-bottom: $borderWidth solid $greyBorder;
+    }
 
     // place menu above the input element
     &.dropup {