Merge branch 'master' into dependabot/npm_and_yarn/tmpl-1.0.5

CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [9.146.0] - 2022-02-15
+
+### Added
+
+- **Dropdown** `onFocus`, `onBlur`, `onMouseEnter` and `onMouseLeave` props.
+
+## [9.145.2] - 2021-10-26
+
+### Fixed
+
+- **AutocompleteInput** border colors to match **Input** behavior.
+
 ## [9.145.1] - 2021-07-12
 
 ### Removed

manifest.json

@@ -2,7 +2,7 @@
   "vendor": "vtex",
   "name": "styleguide",
   "title": "VTEX Styleguide",
-  "version": "9.145.1",
+  "version": "9.146.0",
   "description": "The VTEX Styleguide components for the Render framework",
   "builders": {
     "react": "3.x"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/styleguide",
-  "version": "9.145.1",
+  "version": "9.146.0",
   "scripts": {
     "lint": "eslint react --ext js,jsx,ts,tsx",
     "test": "node config/test.js",

react/components/AutocompleteInput/SearchInput/index.tsx

@@ -81,8 +81,8 @@ const SearchInput: React.FC<PropTypes.InferProps<typeof propTypes> &
   }
   const regularSize = size !== 'small' && size !== 'large'
   const activeClass = classNames({
-    'b--muted-3': focused && !error,
-    'b--muted-4': !focused && !error,
+    'b--muted-2': focused && !error,
+    'b--muted-4 hover-b--muted-3': !focused && !error,
     'b--danger hover-b--danger': error,
     'br--top': !roundedBottom,
     'bg-disabled c-disabled': disabled,

react/components/AutocompleteInput/__snapshots__/index.test.tsx.snap

@@ -12,17 +12,17 @@ exports[`AutocompleteInput should render a regular version of search bar if size
         class="relative w-100"
       >
         <div
-          class="flex flex-row items-stretch overflow-hidden bw1 br2 b--solid b--muted-4 bg-base c-on-base br--left h-regular"
+          class="flex flex-row items-stretch overflow-hidden bw1 br2 b--solid b--muted-4 hover-b--muted-3 bg-base c-on-base br--left h-regular"
         >
           <input
-            class="ma0 border-box w-100 bn outline-0 b--muted-4 bg-base c-on-base pr5 pl5"
+            class="ma0 border-box w-100 bn outline-0 b--muted-4 hover-b--muted-3 bg-base c-on-base pr5 pl5"
             placeholder=""
             value=""
           />
         </div>
       </label>
       <button
-        class="b--muted-4 bg-base c-on-base bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
+        class="b--muted-4 hover-b--muted-3 bg-base c-on-base bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
       >
         <svg
           class="vtex__icon-search  "
@@ -59,17 +59,17 @@ exports[`AutocompleteInput should render with a large size bar 1`] = `
         class="relative w-100"
       >
         <div
-          class="flex flex-row items-stretch overflow-hidden bw1 br2 b--solid b--muted-4 bg-base c-on-base br--left h-large"
+          class="flex flex-row items-stretch overflow-hidden bw1 br2 b--solid b--muted-4 hover-b--muted-3 bg-base c-on-base br--left h-large"
         >
           <input
-            class="ma0 border-box w-100 bn outline-0 b--muted-4 bg-base c-on-base pr5 pl5"
+            class="ma0 border-box w-100 bn outline-0 b--muted-4 hover-b--muted-3 bg-base c-on-base pr5 pl5"
             placeholder=""
             value=""
           />
         </div>
       </label>
       <button
-        class="b--muted-4 bg-base c-on-base bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
+        class="b--muted-4 hover-b--muted-3 bg-base c-on-base bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
       >
         <svg
           class="vtex__icon-search  "
@@ -106,17 +106,17 @@ exports[`AutocompleteInput should render with a regular size bar 1`] = `
         class="relative w-100"
       >
         <div
-          class="flex flex-row items-stretch overflow-hidden bw1 br2 b--solid b--muted-4 bg-base c-on-base br--left h-regular"
+          class="flex flex-row items-stretch overflow-hidden bw1 br2 b--solid b--muted-4 hover-b--muted-3 bg-base c-on-base br--left h-regular"
         >
           <input
-            class="ma0 border-box w-100 bn outline-0 b--muted-4 bg-base c-on-base pr5 pl5"
+            class="ma0 border-box w-100 bn outline-0 b--muted-4 hover-b--muted-3 bg-base c-on-base pr5 pl5"
             placeholder=""
             value=""
           />
         </div>
       </label>
       <button
-        class="b--muted-4 bg-base c-on-base bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
+        class="b--muted-4 hover-b--muted-3 bg-base c-on-base bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
       >
         <svg
           class="vtex__icon-search  "
@@ -153,17 +153,17 @@ exports[`AutocompleteInput should render with a regular size bar when prop is ab
         class="relative w-100"
       >
         <div
-          class="flex flex-row items-stretch overflow-hidden bw1 br2 b--solid b--muted-4 bg-base c-on-base br--left h-regular"
+          class="flex flex-row items-stretch overflow-hidden bw1 br2 b--solid b--muted-4 hover-b--muted-3 bg-base c-on-base br--left h-regular"
         >
           <input
-            class="ma0 border-box w-100 bn outline-0 b--muted-4 bg-base c-on-base pr5 pl5"
+            class="ma0 border-box w-100 bn outline-0 b--muted-4 hover-b--muted-3 bg-base c-on-base pr5 pl5"
             placeholder=""
             value=""
           />
         </div>
       </label>
       <button
-        class="b--muted-4 bg-base c-on-base bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
+        class="b--muted-4 hover-b--muted-3 bg-base c-on-base bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
       >
         <svg
           class="vtex__icon-search  "
@@ -200,17 +200,17 @@ exports[`AutocompleteInput should render with a small size bar 1`] = `
         class="relative w-100"
       >
         <div
-          class="flex flex-row items-stretch overflow-hidden bw1 br2 b--solid b--muted-4 bg-base c-on-base br--left h-small"
+          class="flex flex-row items-stretch overflow-hidden bw1 br2 b--solid b--muted-4 hover-b--muted-3 bg-base c-on-base br--left h-small"
         >
           <input
-            class="ma0 border-box w-100 bn outline-0 b--muted-4 bg-base c-on-base pr5 pl5"
+            class="ma0 border-box w-100 bn outline-0 b--muted-4 hover-b--muted-3 bg-base c-on-base pr5 pl5"
             placeholder=""
             value=""
           />
         </div>
       </label>
       <button
-        class="b--muted-4 bg-base c-on-base bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
+        class="b--muted-4 hover-b--muted-3 bg-base c-on-base bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
       >
         <svg
           class="vtex__icon-search  "

react/components/AutocompleteInput/index.tsx

@@ -280,7 +280,7 @@ const AutocompleteInput: React.FunctionComponent<AutocompleteInputProps> = ({
       />
       <div className="relative">
         {popoverOpened ? (
-          <div className="absolute br--bottom br2 bb bl br bw1 b--muted-3 bg-base w-100 z-1 shadow-5">
+          <div className="absolute br--bottom br2 bb bl br bw1 b--muted-2 bg-base w-100 z-1 shadow-5">
             {renderOptions()}
             {loading && (
               <div className="flex flex-row justify-center items-center pa4">

react/components/Dropdown/README.md

@@ -37,6 +37,10 @@ options = [
       options={options}
       value={state.selected1}
       onChange={(_, v) => setState({ selected1: v })}
+      onFocus={() => console.log('onFocus fired!')}
+      onBlur={() => console.log('onBlur fired!')}
+      onMouseEnter={() => console.log('onMouseEnter fired!')}
+      onMouseLeave={() => console.log('onMouseLeave fired!')}
     />
   </div>
 
@@ -46,6 +50,10 @@ options = [
       options={options}
       value={state.selected2}
       onChange={(_, v) => setState({ selected2: v })}
+      onFocus={() => console.log('onFocus fired!')}
+      onBlur={() => console.log('onBlur fired!')}
+      onMouseEnter={() => console.log('onMouseEnter fired!')}
+      onMouseLeave={() => console.log('onMouseLeave fired!')}
     />
   </div>
 
@@ -56,6 +64,10 @@ options = [
       options={options}
       value={state.selected3}
       onChange={(_, v) => setState({ selected3: v })}
+      onFocus={() => console.log('onFocus fired!')}
+      onBlur={() => console.log('onBlur fired!')}
+      onMouseEnter={() => console.log('onMouseEnter fired!')}
+      onMouseLeave={() => console.log('onMouseLeave fired!')}
     />
   </div>
 </div>

react/components/Dropdown/index.js

@@ -75,10 +75,12 @@ class Dropdown extends Component {
 
   handleFocus = () => {
     this.setState({ active: true })
+    this.props.onFocus && this.props.onFocus(event)
   }
 
   handleBlur = () => {
     this.setState({ active: false })
+    this.props.onBlur && this.props.onBlur(event)
   }
 
   getValueLabel() {
@@ -219,6 +221,8 @@ class Dropdown extends Component {
               onChange={this.handleChange}
               onFocus={this.handleFocus}
               onBlur={this.handleBlur}
+              onMouseEnter={this.props.onMouseEnter}
+              onMouseLeave={this.props.onMouseLeave}
               ref={this.props.forwardedRef}
               // Check the comment on the constructor regarding nil values
               value={value == null ? '' : value}
@@ -324,6 +328,14 @@ Dropdown.propTypes = {
   required: PropTypes.bool,
   /** onChange event */
   onChange: PropTypes.func,
+  /** onFocus event */
+  onFocus: PropTypes.func,
+  /** onBlur event */
+  onBlur: PropTypes.func,
+  /** onMouseEnter event */
+  onMouseEnter: PropTypes.func,
+  /** onMouseLeave event */
+  onMouseLeave: PropTypes.func,
   /** onClose event */
   onClose: PropTypes.func,
   /** onOpen event */

styleguide.config.js

@@ -287,12 +287,12 @@ module.exports = {
 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','GTM-M4WMB9F');</script>
+})(window,document,'script','dataLayer','GTM-NCDTF39');</script>
 <!-- End Google Tag Manager -->`,
     },
     body: {
       raw: `<!-- Google Tag Manager (noscript) -->
-<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-M4WMB9F"
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NCDTF39"
 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 <!-- End Google Tag Manager (noscript) -->`,
     },

yarn.lock

@@ -8645,9 +8645,9 @@ focus-visible@^4.1.5:
   integrity sha512-yo/njtk/BB4Z2euzaZe3CZrg4u5s5uEi7ZwbHBJS2quHx51N0mmcx9nTIiImUGlgy+vf26d0CcQluahBBBL/Fw==
 
 follow-redirects@^1.0.0:
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
-  integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
+  version "1.14.8"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
+  integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==
 
 for-in@^0.1.3:
   version "0.1.8"
@@ -12087,9 +12087,11 @@ node-dir@^0.1.10:
     minimatch "^3.0.2"
 
 node-fetch@^2.6.0:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
-  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+  version "2.6.7"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad"
+  integrity sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==
+  dependencies:
+    whatwg-url "^5.0.0"
 
 node-forge@0.9.0:
   version "0.9.0"
@@ -12834,6 +12836,11 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
+picocolors@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-0.2.1.tgz#570670f793646851d1ba135996962abad587859f"
+  integrity sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==
+
 picomatch@^2.0.4, picomatch@^2.0.5:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
@@ -13060,23 +13067,13 @@ postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.23, postcss@^7.0.26, postcss@^7.0.5, postcss@^7.0.6:
-  version "7.0.26"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.26.tgz#5ed615cfcab35ba9bbb82414a4fa88ea10429587"
-  integrity sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==
+postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.23, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+  version "7.0.39"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.39.tgz#9624375d965630e2e1f2c02a935c82a59cb48309"
+  integrity sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==
   dependencies:
-    chalk "^2.4.2"
+    picocolors "^0.2.1"
     source-map "^0.6.1"
-    supports-color "^6.1.0"
-
-postcss@^7.0.32:
-  version "7.0.32"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
-  integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
-  dependencies:
-    chalk "^2.4.2"
-    source-map "^0.6.1"
-    supports-color "^6.1.0"
 
 prelude-ls@~1.1.2:
   version "1.1.2"
@@ -16065,6 +16062,11 @@ tr46@^1.0.1:
   dependencies:
     punycode "^2.1.0"
 
+tr46@~0.0.3:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a"
+  integrity sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=
+
 trim-lines@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-1.1.3.tgz#839514be82428fd9e7ec89e35081afe8f6f93115"
@@ -16483,9 +16485,9 @@ url-loader@^4.0.0:
     schema-utils "^2.6.5"
 
 url-parse@^1.4.3:
-  version "1.5.3"
-  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.3.tgz#71c1303d38fb6639ade183c2992c8cc0686df862"
-  integrity sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==
+  version "1.5.10"
+  resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
+  integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
   dependencies:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
@@ -16792,6 +16794,11 @@ web-namespaces@^1.0.0:
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec"
   integrity sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==
 
+webidl-conversions@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
+  integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=
+
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
@@ -16991,6 +16998,14 @@ whatwg-mimetype@^2.2.0, whatwg-mimetype@^2.3.0:
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"
   integrity sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==
 
+whatwg-url@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
+  integrity sha1-lmRU6HZUYuN2RNNib2dCzotwll0=
+  dependencies:
+    tr46 "~0.0.3"
+    webidl-conversions "^3.0.0"
+
 whatwg-url@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-7.1.0.tgz#c2c492f1eca612988efd3d2266be1b9fc6170d06"