Merge pull request #12 from lob/css

Fixes css bug

Author: mmrtnz

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/react-address-autocomplete",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "A collection of components and utility functions for verifying and suggesting addresses using Lob",
   "author": "Lob",
   "license": "MIT",

package.json

@@ -2,7 +2,7 @@
 import React, { useEffect, useState, useRef } from 'react'
 import Select, { components } from 'react-select'
 import throttle from 'lodash.throttle'
-import './Autocomplete.css'
+import styles from './Autocomplete.module.css'
 
 // Internal Dependencies
 import { postAutocompleteAddress } from './api'
@@ -28,16 +28,16 @@ const LobLogo = ({ className }) => {
 }
 
 const poweredByLob = () => (
-  <a href={LOB_URL} className='lob-gray-text'>
+  <a href={LOB_URL} className={styles.lobGrayText}>
     <span style={{ verticalAlign: 'top' }}>Powered by </span>
-    <LobLogo className='lob-logo' />
+    <LobLogo className={styles.lobLogo} />
   </a>
 )
 
 const getLobLabel = () => (
-  <div className={LOB_LABEL}>
-    <LobLogo className='logo-large' />
-    <span className='lob-gray-text'>Deliverable addresses</span>
+  <div className={styles.lobLabel}>
+    <LobLogo className={styles.logoLarge} />
+    <span className={styles.lobGrayText}>Deliverable addresses</span>
     <a href={LOB_URL}>Learn more</a>
   </div>
 )
@@ -76,7 +76,7 @@ const getOptionElement = (suggestion, inputValue) => {
   return (
     <span>
       {primaryLineElement}
-      <span className='lob-gray-text'>
+      <span className={styles.lobGrayText}>
         {city},&nbsp;{state.toUpperCase()},&nbsp;{zip_code}
       </span>
     </span>

src/Autocomplete.js

@@ -1,9 +1,9 @@
-.lob-gray-text {
+.lobGrayText {
   color: #888;
   text-decoration: inherit;
 }
 
-.lob-label {
+.lobLabel {
   align-items: center;
   border-bottom: 1px solid #DDDDDD;
   cursor: pointer;
@@ -13,24 +13,24 @@
   pointer-events: none;
 }
 
-.lob-label > a {
+.lobLabel > a {
   font-weight: 600;
   color: #0699D6;
   text-decoration: inherit;
 }
 
-.lob-label > span {
+.lobLabel > span {
   flex: 1;
   font-weight: 400;
   margin-left: 12px;
 }
 
-.lob-logo {
+.lobLogo {
   height: .9em;
   margin-left: 1px;
   margin-top: 3px;
 }
 
-.logo-large {
+.logoLarge {
   height: 21px;
 }