Merge branch 'fix-search-icon-Lookup' of https://github.com/nexxtway/…

…react-rainbow into fix-search-icon-Lookup
nexxtway · Nov 22, 2020 · 03c9d45 · 03c9d45
2 parents 5c1d2b2 + 322c9d2
commit 03c9d45
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 18 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -1,9 +1,13 @@
-version: 2
+version: 2.1
+
+orbs:
+    browser-tools: circleci/browser-tools@1.1.0
 
 defaults: &defaults
     working_directory: ~/repo
     docker:
-        - image: circleci/node:12.9.1-stretch-browsers
+        - image: cimg/node:12.19.0-browsers
+    resource_class: medium+
 
 jobs:
     build_and_test:
@@ -53,13 +57,8 @@ jobs:
 
             - run: yarn install
 
-            - run:
-                  name: Install Chrome
-                  command: |
-                      curl -L -o google-chrome.deb https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
-                      sudo dpkg -i google-chrome.deb
-                      sudo sed -i 's|HERE/chrome\"|HERE/chrome\" --disable-setuid-sandbox|g' /opt/google/chrome/google-chrome
-                      rm google-chrome.deb
+            - browser-tools/install-chrome:
+                  chrome-version: 85.0.4183.102
 
             - run:
                   command: yarn start

diff --git a/README.md b/README.md
@@ -37,6 +37,7 @@ React Rainbow is a collection of components that will reliably help you build yo
 -   Redux-Form integration.
 -   We designed each component with i18n in mind.
 -   Accessibility is part of our definition of done.
+-   Components with out-of-the-box Typescript typing.
 
 <br/>
 
@@ -50,7 +51,7 @@ React Rainbow is a collection of components that will reliably help you build yo
 
 ### 📦 Installation
 
-React Rainbow components is available as an [npm package](https://www.npmjs.com/package/react-rainbow-components).
+React Rainbow Components is available as an [npm package](https://www.npmjs.com/package/react-rainbow-components).
 
 ```bash
 $ yarn add react-rainbow-components
@@ -66,7 +67,7 @@ $ npm install react-rainbow-components --save
 
 ### ⌨️ Usage
 
-Here is a quick example to get you started, **it's all you need**:
+Here is a quick example to get you started. **It's all you need**:
 
 ```js
 import React from 'react';
@@ -132,9 +133,9 @@ Are you looking for an example project to get started?
 
 We are excited that you are interested in contributing to this project!
 
-You can help us improve React Rainbow Components, the first step to begin collaborate is to create an issue before submitting a pull request, it's always good to file an issue, so we can discuss the details of your approach or suggestion.
+You can help us improve React Rainbow Components, the first step to begin collaboration is to create an issue before submitting a pull request. It's always good to file an issue, so we can discuss the details of your approach or suggestion.
 
-[See more details about how to collaborate?](https://github.com/nexxtway/react-rainbow/blob/master/CONTRIBUTING.md)
+[See more details about how to collaborate](https://github.com/nexxtway/react-rainbow/blob/master/CONTRIBUTING.md)
 
 <br/>
 

diff --git a/examples/create-react-app/yarn.lock b/examples/create-react-app/yarn.lock
@@ -2598,9 +2598,9 @@ domutils@^1.5.1:
     domelementtype "1"
 
 dot-prop@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
-  integrity sha512-tUMXrxlExSW6U2EXiiKGSBVdYgtV8qlHL+C10TsW4PURY/ic+eaysnSkwB4kA/mBlCyy/IKDJ+Lc3wbWeaXtuQ==
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.1.tgz#45884194a71fc2cda71cbb4bceb3a4dd2f433ba4"
+  integrity sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ==
   dependencies:
     is-obj "^1.0.0"
 

diff --git a/src/components/GoogleAddressLookup/component.js b/src/components/GoogleAddressLookup/component.js
@@ -170,6 +170,7 @@ class PlacesLookupComponent extends Component {
             onClick,
             // onFocus,
             onBlur,
+            variant,
         } = this.props;
         const { isSearching, suggestions } = this.state;
         const options = suggestions.length > 0 ? suggestions : null;
@@ -199,6 +200,7 @@ class PlacesLookupComponent extends Component {
                     error={error}
                     icon={<LocationIcon />}
                     preferredSelectedOption={1}
+                    variant={variant}
                 />
                 <RenderIf isTrue={!error}>
                     <StyledPoweredByGoogleContainer>
@@ -237,6 +239,7 @@ PlacesLookupComponent.propTypes = {
     onClick: PropTypes.func,
     // onFocus: PropTypes.func,
     onBlur: PropTypes.func,
+    variant: PropTypes.oneOf(['default', 'shaded', 'bare']),
 };
 
 PlacesLookupComponent.defaultProps = {
@@ -259,6 +262,7 @@ PlacesLookupComponent.defaultProps = {
     id: undefined,
     labelAlignment: 'center',
     hideLabel: false,
+    variant: 'default',
 };
 
 export default withReduxForm(PlacesLookupComponent);

diff --git a/src/components/GoogleAddressLookup/index.d.ts b/src/components/GoogleAddressLookup/index.d.ts
@@ -122,6 +122,7 @@ export interface GoogleAddressLookupProps extends BaseProps {
     onClick?: (event: MouseEvent<HTMLElement>) => void;
     onBlur?: (event: null | LookupValue) => void;
     searchOptions?: SearchOptionsShape;
+    variant?: 'default' | 'shaded' | 'bare';
 }
 
 export default function(props: GoogleAddressLookupProps): JSX.Element | null;
diff --git a/src/components/GoogleAddressLookup/index.js b/src/components/GoogleAddressLookup/index.js
@@ -84,6 +84,9 @@ GoogleAddressLookup.propTypes = {
      *  }
      */
     searchOptions: CustomPropTypes.searchOptionsShape,
+    /** The variant changes the appearance of the Input. Accepted variants include default,
+     *shaded and bare. This value defaults to default. */
+    variant: PropTypes.oneOf(['default', 'shaded', 'bare']),
 };
 
 GoogleAddressLookup.defaultProps = {
@@ -106,4 +109,5 @@ GoogleAddressLookup.defaultProps = {
     labelAlignment: 'center',
     hideLabel: false,
     searchOptions: {},
+    variant: 'default',
 };
diff --git a/src/components/Sidebar/readme.md b/src/components/Sidebar/readme.md
@@ -32,7 +32,7 @@ class SimpleSidebar extends React.Component {
         return (
             <Sidebar selectedItem={selectedItem} onSelect={this.handleOnSelect} id="sidebar-1">
                 <SidebarItem icon={<DashboardPurpleIcon />} name="Dashboard" label="Dashboard" />
-                <SidebarItem icon={<ApplicationIcon />} name="Aplications" label="Aplications" />
+                <SidebarItem icon={<ApplicationIcon />} name="Aplications" label="Applications" />
                 <SidebarItem icon={<PuzzleIcon />} name="Components" label="Components" />
                 <SidebarItem icon={<MessagesIcon />} name="Messages" label="Messages" />
                 <SidebarItem icon={<ChartsIcon />} name="Charts" label="Charts" />
@@ -90,7 +90,7 @@ function SimpleSidebar() {
             <div>
                 <Sidebar selectedItem={selectedItem} onSelect={handleOnSelect} id="sidebar-1">
                     <SidebarItem icon={<DashboardPurpleIcon />} name="Dashboard" label="Dashboard" />
-                    <SidebarItem icon={<ApplicationIcon />} name="Aplications" label="Aplications" />
+                    <SidebarItem icon={<ApplicationIcon />} name="Aplications" label="Applications" />
                     <SidebarItem icon={<PuzzleIcon />} name="Components" label="Components" />
                     <SidebarItem icon={<MessagesIcon />} name="Messages" label="Messages" />
                     <SidebarItem icon={<ChartsIcon />} name="Charts" label="Charts" />