Add Search Input (codesandbox#3297)

SaraVieira · siddharthkp · commit 0a94d48517bc · 2020-01-09T15:19:52.000+01:00
* add more tests cases

* use token instead of color
diff --git a/packages/common/src/design-language/theme.ts b/packages/common/src/design-language/theme.ts
@@ -7,6 +7,16 @@ const theme = {
   fontWeights,
 
   // we use a 4 point grid
+  // 0 - 0
+  // 1 - 4
+  // 2 - 8
+  // 3 - 12
+  // 4 - 16
+  // 5 - 24
+  // 6 - 28
+  // 7 - 32
+  // 8 - 36
+  // 9 - 40
   space: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40],
   sizes: [0, 4, 8, 12, 16, 20, 24, 28, 32, 36, 40],
 
diff --git a/packages/components/.storybook/config.tsx b/packages/components/.storybook/config.tsx
@@ -33,7 +33,6 @@ const GlobalStyle = createGlobalStyle`
   ${global};
   html body {
     font-family: 'Inter', sans-serif;
-
     background-color: ${props =>
       // @ts-ignore
       props.theme.colors.sideBar.background} !important;
diff --git a/packages/components/src/components/Input/index.stories.tsx b/packages/components/src/components/Input/index.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
 import { Input } from '.';
 
 export default {
@@ -12,3 +13,10 @@ export const Placeholder = () => <Input placeholder="Your name" />;
 export const Label = () => (
   <Input label="Your full name" placeholder="John Doe" />
 );
+export const onChange = () => (
+  <Input
+    label="Your full name"
+    placeholder="John Doe"
+    onChange={action('input change')}
+  />
+);
diff --git a/packages/components/src/components/SearchInput/index.stories.tsx b/packages/components/src/components/SearchInput/index.stories.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { SearchInput } from '.';
+
+export default {
+  title: 'components/SearchInput',
+  component: SearchInput,
+};
+
+export const Basic = () => <SearchInput />;
+export const Placeholder = () => (
+  <SearchInput placeholder="Search For Dependencies" />
+);
+export const Label = () => (
+  <SearchInput label="Search For Dependencies" placeholder="react" />
+);
+
+export const onChange = () => (
+  <SearchInput
+    onChange={action('search input change')}
+    label="Search For Dependencies"
+    placeholder="react"
+  />
+);
diff --git a/packages/components/src/components/SearchInput/index.tsx b/packages/components/src/components/SearchInput/index.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import styled from 'styled-components';
+import css from '@styled-system/css';
+import VisuallyHidden from '@reach/visually-hidden';
+import { uniqueId } from 'lodash-es';
+import { Text } from '../Text';
+import { InputComponent } from '../Input';
+import { Element } from '../Element';
+
+const SearchIconBase = props => (
+  <svg fill="none" width="12" height="12" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M6.966 7.932a4.15 4.15 0 01-2.69.993C1.916 8.925 0 6.927 0 4.463 0 1.998 1.915 0 4.277 0s4.276 1.998 4.276 4.463c0 1.063-.356 2.04-.951 2.806L12 11.86l-.635.663-4.399-4.59zm.689-3.47c0 1.947-1.513 3.525-3.378 3.525C2.41 7.987.899 6.41.899 4.463.899 2.516 2.41.938 4.277.938c1.865 0 3.378 1.578 3.378 3.525z"
+    />
+  </svg>
+);
+
+export const SearchInputComponent = styled(InputComponent)(
+  css({
+    paddingLeft: 5,
+
+    '::-ms-clear, ::-ms-reveal': {
+      display: 'none',
+      width: 0,
+      height: 0,
+    },
+
+    '::-webkit-search-cancel-button': {
+      display: 'none',
+    },
+  })
+);
+
+export const SearchIcon = styled(SearchIconBase)(
+  css({
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    left: 1,
+
+    path: {
+      fill: 'input.placeholderForeground',
+    },
+  })
+);
+
+interface ISearchProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+}
+
+export const SearchInput: React.FC<ISearchProps> = ({ label, ...props }) => {
+  const id = props.id || uniqueId('form_');
+
+  return (
+    <>
+      {props.placeholder && !label ? (
+        <VisuallyHidden>
+          <label htmlFor={id}>{props.placeholder}</label>
+        </VisuallyHidden>
+      ) : null}
+      <Text
+        as="label"
+        size={2}
+        marginBottom={2}
+        htmlFor={id}
+        style={{ display: 'block' }}
+      >
+        {label}
+      </Text>
+      <Element style={{ position: 'relative' }}>
+        <SearchIcon />
+        <SearchInputComponent id={id} {...props} type="search" />
+      </Element>
+    </>
+  );
+};
diff --git a/packages/components/src/components/Textarea/index.stories.tsx b/packages/components/src/components/Textarea/index.stories.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
 import { Textarea } from '.';
 
 export default {
@@ -30,3 +31,14 @@ export const MaxLength = () => (
     <Textarea maxLength={10} label="Your full name" placeholder="John Doe" />
   </Wrapper>
 );
+
+export const onChange = () => (
+  <Wrapper>
+    <Textarea
+      maxLength={10}
+      label="Your full name"
+      placeholder="John Doe"
+      onChange={action('textarea change')}
+    />
+  </Wrapper>
+);
diff --git a/packages/components/src/components/Textarea/index.tsx b/packages/components/src/components/Textarea/index.tsx
@@ -43,6 +43,8 @@ const Count = styled.div<{ limit: boolean }>(({ limit }) =>
 export const Textarea: React.FC<ITextareaProps> = ({
   label,
   maxLength,
+  onChange,
+  onKeyPress,
   ...props
 }) => {
   const id = props.id || uniqueId('form_');
@@ -57,7 +59,7 @@ export const Textarea: React.FC<ITextareaProps> = ({
 
   // eslint-disable-next-line consistent-return
   const update = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    if (props.onChange) props.onChange(e);
+    if (onChange) onChange(e);
     if (maxLength) {
       const trimmedText = e.target.value.substring(0, maxLength);
       setValue(trimmedText);
@@ -68,7 +70,7 @@ export const Textarea: React.FC<ITextareaProps> = ({
   };
 
   const keyPress = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    if (props.onKeyPress) props.onKeyPress(e);
+    if (onKeyPress) onKeyPress(e);
     if (maxLength) {
       if (maxLength <= wordCount) {
         return false;
