Feature/add size prop

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [9.123.0] - 2020-06-26
+
+### Added
+
+- `size` prop to AutocompleteInput
+
 ## [9.122.0] - 2020-06-25
 
 ### Fixed

manifest.json

@@ -2,7 +2,7 @@
   "vendor": "vtex",
   "name": "styleguide",
   "title": "VTEX Styleguide",
-  "version": "9.122.0",
+  "version": "9.123.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.122.0",
+  "version": "9.123.0",
   "scripts": {
     "lint": "eslint react --ext js,jsx,ts,tsx",
     "test": "node config/test.js",

react/components/AutocompleteInput/README.md

@@ -273,3 +273,100 @@ const DisabledAutocompleteInput = () => (
 
 ;<DisabledAutocompleteInput />
 ```
+
+#### Size
+
+```jsx
+import { uniq } from 'lodash'
+import { useState, useRef } from 'react'
+
+const allUsers = [
+  'Ana Clara',
+  'Ana Luiza',
+  { value: 1, label: 'Bruno' },
+  'Carlos',
+  'Daniela',
+]
+
+const UsersAutocomplete = () => {
+  const [term, setTerm] = useState('')
+  const [loading, setLoading] = useState(false)
+  const timeoutRef = useRef(null)
+
+  const optionsSmall = {
+    onSelect: (...args) => console.log('onSelect: ', ...args),
+    loading,
+    value: !term.length
+      ? []
+      : allUsers.filter(user =>
+          typeof user === 'string'
+            ? user.toLowerCase().includes(term.toLowerCase())
+            : user.label.toLowerCase().includes(term.toLowerCase())
+        ),
+    size: 'small',
+  }
+
+  const optionsRegular = {
+    onSelect: (...args) => console.log('onSelect: ', ...args),
+    loading,
+    value: !term.length
+      ? []
+      : allUsers.filter(user =>
+          typeof user === 'string'
+            ? user.toLowerCase().includes(term.toLowerCase())
+            : user.label.toLowerCase().includes(term.toLowerCase())
+        ),
+    size: 'regular',
+  }
+
+  const optionsLarge = {
+    onSelect: (...args) => console.log('onSelect: ', ...args),
+    loading,
+    value: !term.length
+      ? []
+      : allUsers.filter(user =>
+          typeof user === 'string'
+            ? user.toLowerCase().includes(term.toLowerCase())
+            : user.label.toLowerCase().includes(term.toLowerCase())
+        ),
+    size: 'large',
+  }
+
+  const input = {
+    onChange: term => {
+      if (term) {
+        setLoading(true)
+        if (timeoutRef.current) {
+          clearTimeout(timeoutRef.current)
+        }
+        timeoutRef.current = setTimeout(() => {
+          setLoading(false)
+          setTerm(term)
+          timeoutRef.current = null
+        }, 1000)
+      } else {
+        setTerm(term)
+      }
+    },
+    onSearch: (...args) => console.log('onSearch:', ...args),
+    onClear: () => setTerm(''),
+    placeholder: 'Search user... (e.g.: Ana)',
+    value: term,
+  }
+  return (
+    <div>
+      <span className="mr4">
+        <AutocompleteInput input={input} options={optionsSmall} />
+      </span>
+      <span className="mr4">
+        <AutocompleteInput input={input} options={optionsRegular} />
+      </span>
+      <span className="mr4">
+        <AutocompleteInput input={input} options={optionsLarge} />
+      </span>
+    </div>
+  )
+}
+
+;<UsersAutocomplete />
+```

react/components/AutocompleteInput/SearchInput/index.tsx

@@ -24,14 +24,19 @@ const propTypes = {
   onBlur: PropTypes.func,
   /** Determine if the input and the button should be disabled */
   disabled: PropTypes.bool,
+  /** Determine the search bar size */
+  size: PropTypes.oneOf(['small', 'regular', 'large']),
 }
 
 const defaultProps = {
   roundedBottom: true,
 }
 
 const SearchInput: React.FC<PropTypes.InferProps<typeof propTypes> &
-  Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'value'>> = props => {
+  Omit<
+    React.HTMLProps<HTMLInputElement>,
+    'onChange' | 'value' | 'size'
+  >> = props => {
   const {
     onClear,
     onSearch,
@@ -41,6 +46,7 @@ const SearchInput: React.FC<PropTypes.InferProps<typeof propTypes> &
     onFocus,
     onBlur,
     disabled,
+    size,
     ...inputProps
   } = props
 
@@ -63,18 +69,20 @@ const SearchInput: React.FC<PropTypes.InferProps<typeof propTypes> &
     setFocused(false)
     onBlur && onBlur(e)
   }
-
+  const regularSize = size !== 'small' && size !== 'large'
   const activeClass = classNames({
     'b--muted-3': focused,
     'b--muted-4': !focused,
     'br--top': !roundedBottom,
     'bg-disabled c-disabled': disabled,
     'bg-base c-on-base': !disabled,
+    [`h-${size}`]: !regularSize,
+    'h-regular': regularSize,
   })
 
   const buttonClasses = classNames(
     activeClass,
-    'bg-base br2 br--right h-regular w3 bw1 ba pa0 bl-0',
+    'bg-base br2 br--right w3 bw1 ba pa0 bl-0',
     {
       'c-link pointer': !disabled,
       'c-disabled': disabled,
@@ -85,7 +93,7 @@ const SearchInput: React.FC<PropTypes.InferProps<typeof propTypes> &
     <div className="flex flex-row">
       <div className="relative w-100">
         <input
-          className={`${activeClass} w-100 ma0 border-box bw1 br2 ba outline-0 t-body h-regular ph5 pr8 br--left`}
+          className={`${activeClass} w-100 ma0 border-box bw1 br2 ba outline-0 t-body ph5 pr8 br--left`}
           value={value}
           onFocus={handleFocus}
           onBlur={handleBlur}

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

@@ -0,0 +1,201 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AutocompleteInput should render a regular version of search bar if size prop isnt small, regular or large 1`] = `
+<DocumentFragment>
+  <div
+    class="flex flex-column w-100"
+  >
+    <div
+      class="flex flex-row"
+    >
+      <div
+        class="relative w-100"
+      >
+        <input
+          class="b--muted-4 bg-base c-on-base h-regular w-100 ma0 border-box bw1 br2 ba outline-0 t-body ph5 pr8 br--left"
+          placeholder=""
+          value=""
+        />
+      </div>
+      <button
+        class="b--muted-4 bg-base c-on-base h-regular bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
+      >
+        <svg
+          class="vtex__icon-search  "
+          fill="none"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <path
+            d="M15.707 13.293L13 10.586C13.63 9.536 14 8.311 14 7C14 3.14 10.859 0 7 0C3.141 0 0 3.14 0 7C0 10.86 3.141 14 7 14C8.312 14 9.536 13.631 10.586 13L13.293 15.707C13.488 15.902 13.744 16 14 16C14.256 16 14.512 15.902 14.707 15.707L15.707 14.707C16.098 14.316 16.098 13.684 15.707 13.293ZM7 12C4.239 12 2 9.761 2 7C2 4.239 4.239 2 7 2C9.761 2 12 4.239 12 7C12 9.761 9.761 12 7 12Z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AutocompleteInput should render with a large size bar 1`] = `
+<DocumentFragment>
+  <div
+    class="flex flex-column w-100"
+  >
+    <div
+      class="flex flex-row"
+    >
+      <div
+        class="relative w-100"
+      >
+        <input
+          class="b--muted-4 bg-base c-on-base h-large w-100 ma0 border-box bw1 br2 ba outline-0 t-body ph5 pr8 br--left"
+          placeholder=""
+          value=""
+        />
+      </div>
+      <button
+        class="b--muted-4 bg-base c-on-base h-large bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
+      >
+        <svg
+          class="vtex__icon-search  "
+          fill="none"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <path
+            d="M15.707 13.293L13 10.586C13.63 9.536 14 8.311 14 7C14 3.14 10.859 0 7 0C3.141 0 0 3.14 0 7C0 10.86 3.141 14 7 14C8.312 14 9.536 13.631 10.586 13L13.293 15.707C13.488 15.902 13.744 16 14 16C14.256 16 14.512 15.902 14.707 15.707L15.707 14.707C16.098 14.316 16.098 13.684 15.707 13.293ZM7 12C4.239 12 2 9.761 2 7C2 4.239 4.239 2 7 2C9.761 2 12 4.239 12 7C12 9.761 9.761 12 7 12Z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AutocompleteInput should render with a regular size bar 1`] = `
+<DocumentFragment>
+  <div
+    class="flex flex-column w-100"
+  >
+    <div
+      class="flex flex-row"
+    >
+      <div
+        class="relative w-100"
+      >
+        <input
+          class="b--muted-4 bg-base c-on-base h-regular w-100 ma0 border-box bw1 br2 ba outline-0 t-body ph5 pr8 br--left"
+          placeholder=""
+          value=""
+        />
+      </div>
+      <button
+        class="b--muted-4 bg-base c-on-base h-regular bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
+      >
+        <svg
+          class="vtex__icon-search  "
+          fill="none"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <path
+            d="M15.707 13.293L13 10.586C13.63 9.536 14 8.311 14 7C14 3.14 10.859 0 7 0C3.141 0 0 3.14 0 7C0 10.86 3.141 14 7 14C8.312 14 9.536 13.631 10.586 13L13.293 15.707C13.488 15.902 13.744 16 14 16C14.256 16 14.512 15.902 14.707 15.707L15.707 14.707C16.098 14.316 16.098 13.684 15.707 13.293ZM7 12C4.239 12 2 9.761 2 7C2 4.239 4.239 2 7 2C9.761 2 12 4.239 12 7C12 9.761 9.761 12 7 12Z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AutocompleteInput should render with a regular size bar when prop is absent 1`] = `
+<DocumentFragment>
+  <div
+    class="flex flex-column w-100"
+  >
+    <div
+      class="flex flex-row"
+    >
+      <div
+        class="relative w-100"
+      >
+        <input
+          class="b--muted-4 bg-base c-on-base h-regular w-100 ma0 border-box bw1 br2 ba outline-0 t-body ph5 pr8 br--left"
+          placeholder=""
+          value=""
+        />
+      </div>
+      <button
+        class="b--muted-4 bg-base c-on-base h-regular bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
+      >
+        <svg
+          class="vtex__icon-search  "
+          fill="none"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <path
+            d="M15.707 13.293L13 10.586C13.63 9.536 14 8.311 14 7C14 3.14 10.859 0 7 0C3.141 0 0 3.14 0 7C0 10.86 3.141 14 7 14C8.312 14 9.536 13.631 10.586 13L13.293 15.707C13.488 15.902 13.744 16 14 16C14.256 16 14.512 15.902 14.707 15.707L15.707 14.707C16.098 14.316 16.098 13.684 15.707 13.293ZM7 12C4.239 12 2 9.761 2 7C2 4.239 4.239 2 7 2C9.761 2 12 4.239 12 7C12 9.761 9.761 12 7 12Z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AutocompleteInput should render with a small size bar 1`] = `
+<DocumentFragment>
+  <div
+    class="flex flex-column w-100"
+  >
+    <div
+      class="flex flex-row"
+    >
+      <div
+        class="relative w-100"
+      >
+        <input
+          class="b--muted-4 bg-base c-on-base h-small w-100 ma0 border-box bw1 br2 ba outline-0 t-body ph5 pr8 br--left"
+          placeholder=""
+          value=""
+        />
+      </div>
+      <button
+        class="b--muted-4 bg-base c-on-base h-small bg-base br2 br--right w3 bw1 ba pa0 bl-0 c-link pointer"
+      >
+        <svg
+          class="vtex__icon-search  "
+          fill="none"
+          height="16"
+          viewBox="0 0 16 16"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+          xmlns:xlink="http://www.w3.org/1999/xlink"
+        >
+          <path
+            d="M15.707 13.293L13 10.586C13.63 9.536 14 8.311 14 7C14 3.14 10.859 0 7 0C3.141 0 0 3.14 0 7C0 10.86 3.141 14 7 14C8.312 14 9.536 13.631 10.586 13L13.293 15.707C13.488 15.902 13.744 16 14 16C14.256 16 14.512 15.902 14.707 15.707L15.707 14.707C16.098 14.316 16.098 13.684 15.707 13.293ZM7 12C4.239 12 2 9.761 2 7C2 4.239 4.239 2 7 2C9.761 2 12 4.239 12 7C12 9.761 9.761 12 7 12Z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;