chore: Add tooltip which display when user hover in tag (#879)

* chore: Add tooltip which display when user hover in tag

packages/elements/package.json

@@ -51,6 +51,7 @@
     "prop-types": "^15.7.2",
     "rc-notification": "^4.0.0",
     "rc-select": "^10.1.8",
+    "rc-tooltip": "^4.0.3",
     "react-datasheet": "^1.4.0",
     "react-datepicker": "^2.9.6",
     "react-google-map": "^3.1.1",

packages/elements/src/components/DropdownSelect/__stubs__/options.ts

@@ -0,0 +1,25 @@
+import { SelectOption } from '../'
+
+export const options: SelectOption[] = [
+  {
+    value: 'Property',
+    label: 'Property',
+    description: `The type of Property will be given to an application that can be launched for a 
+      specific property from Agency Cloud. `,
+    link: 'https://foundations-documentation.reapit.cloud/api/desktop-api#property-1',
+  },
+  {
+    value: 'Applicant',
+    label: 'Applicant',
+    description: `The type of Applicant will be given to an application that can be launched for a 
+      specific applicant from Agency Cloud.`,
+    link: 'https://foundations-documentation.reapit.cloud/api/desktop-api#applicant',
+  },
+  {
+    value: 'idCheck',
+    label: 'Id Check',
+    description: `The type of ID Check will be given to an application that can be used to replace 
+      the ID Check screen in Agency Cloud.`,
+    link: 'https://foundations-documentation.reapit.cloud/api/desktop-api#id-check',
+  },
+]

packages/elements/src/components/DropdownSelect/__tests__/__snapshots__/custom-tag.tsx.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CustomTag should match a snapshot 1`] = `
+<ForwardRef(Tooltip)
+  overlay={
+    <span
+      className="reapit-tooltip-content"
+    >
+      The type of Property will be given to an application that can be launched for a 
+    specific property from Agency Cloud.
+      <a
+        href="https://foundations-documentation.reapit.cloud/api/desktop-api#property-1"
+      >
+        More Info
+      </a>
+    </span>
+  }
+  placement="bottomLeft"
+  prefixCls="reapit-tooltip"
+>
+  <div
+    className="custom-tag tags has-addons"
+  >
+    <span
+      className="tag is-light"
+    >
+      Property
+    </span>
+    <a
+      className="tag is-light is-delete"
+      href=""
+      onClick={[Function]}
+    />
+  </div>
+</ForwardRef(Tooltip)>
+`;

packages/elements/src/components/DropdownSelect/__test__/__snapshots__/index.tsx.snap → packages/elements/src/components/DropdownSelect/__tests__/__snapshots__/index.tsx.snap

@@ -8,7 +8,7 @@ exports[`Dropdown-select should match a snapshot 1`] = `
     className="control"
   >
     <Field
-      name="test"
+      name="demo"
     >
       <Component />
     </Field>

packages/elements/src/components/DropdownSelect/__tests__/custom-tag.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { shallow } from 'enzyme'
+import { CustomTag, CustomTagProps } from '../custom-tag'
+
+const props: CustomTagProps = {
+  label: 'Property',
+  description: `The type of Property will be given to an application that can be launched for a 
+    specific property from Agency Cloud.`,
+  link: 'https://foundations-documentation.reapit.cloud/api/desktop-api#property-1',
+  onClose: jest.fn(),
+}
+
+describe('CustomTag', () => {
+  it('should match a snapshot', () => {
+    expect(shallow(<CustomTag {...props} />)).toMatchSnapshot()
+  })
+
+  it('should call onClose when click remove', () => {
+    const wrapper = shallow(<CustomTag {...props} />)
+    const element = wrapper.find('a')
+    element.simulate('click')
+    expect(props.onClose).toHaveBeenCalled()
+  })
+})

packages/elements/src/components/DropdownSelect/__tests__/index.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react'
+import { shallow, mount } from 'enzyme'
+import { DropdownSelect, DropdownSelectProps } from '../index'
+import { Formik, Form } from 'formik'
+import toJson from 'enzyme-to-json'
+import { options as mockOptions } from '../__stubs__/options'
+
+const dropdownSelectProps: DropdownSelectProps = {
+  name: 'demo',
+  labelText: 'demo',
+  options: mockOptions,
+}
+
+const createFormikWrapper = () => {
+  const wrapper = mount(
+    <Formik onSubmit={jest.fn()} initialValues={{ demo: 'b' }}>
+      {() => (
+        <Form>
+          <div className="column is-half-desktop">
+            <DropdownSelect name="demo" mode="tags" labelText="Demo" options={mockOptions} />
+          </div>
+        </Form>
+      )}
+    </Formik>,
+  )
+
+  return wrapper
+}
+
+describe('Dropdown-select', () => {
+  it('should match a snapshot', () => {
+    expect(toJson(shallow(<DropdownSelect {...dropdownSelectProps} />))).toMatchSnapshot()
+  })
+
+  it('Render label correctly', () => {
+    const wrapper = createFormikWrapper()
+    const label = wrapper.find('label').first()
+    expect(label.text()).toBe('Demo')
+  })
+
+  afterEach(() => {
+    jest.resetAllMocks()
+  })
+})

packages/elements/src/components/DropdownSelect/custom-tag.tsx

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import Tooltip from 'rc-tooltip'
+
+export interface CustomTagProps {
+  label: string
+  description: string
+  link: string
+  onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void
+}
+
+export const CustomTag: React.FC<CustomTagProps> = ({ label, description, link, onClose }) => {
+  const handleRemoveTag = (event: React.SyntheticEvent) => {
+    event?.preventDefault()
+    onClose()
+  }
+
+  return (
+    <Tooltip
+      prefixCls="reapit-tooltip"
+      placement="bottomLeft"
+      overlay={
+        <span className="reapit-tooltip-content">
+          {description}
+          {link && <a href={link}>More Info</a>}
+        </span>
+      }
+    >
+      <div className="custom-tag tags has-addons">
+        <span className="tag is-light">{label}</span>
+        <a href="" onClick={handleRemoveTag} className="tag is-light is-delete"></a>
+      </div>
+    </Tooltip>
+  )
+}
+
+export default CustomTag

packages/elements/src/components/DropdownSelect/dropdown-select.stories.tsx

@@ -4,24 +4,19 @@ import { Form, Formik } from 'formik'
 import { storiesOf } from '@storybook/react'
 import { DropdownSelect } from '.'
 import { action } from '@storybook/addon-actions'
-
-const options = [
-  { value: 'jack', label: 'Jack' },
-  { value: 'lucy', label: 'Lucy' },
-  { value: 'yiminghe', label: 'Yiminghe' },
-]
+import { options } from './__stubs__/options'
 
 storiesOf('DropdownSelect', module).add('Primary', () => {
   return (
     <section className="section">
       <Formik
-        initialValues={{ value: '' }}
+        initialValues={{ desktopTypes: '' }}
         onSubmit={values => {
           action('Form Values' + values)
         }}
       >
         <Form>
-          <DropdownSelect name="dropdown-select-field" mode="tags" labelText="Dropdown Select" options={options} />
+          <DropdownSelect name="desktopTypes" labelText="Dropdown Select" options={options} />
         </Form>
       </Formik>
     </section>

packages/elements/src/components/DropdownSelect/index.tsx

@@ -1,31 +1,54 @@
 import * as React from 'react'
 import Select, { Option, SelectProps } from 'rc-select'
+import { CustomTagProps } from 'rc-select/lib/interface/generator'
 import { Field, FieldProps } from 'formik'
-import './index.scss'
-
-const handleChangeOption = field => value => {
-  field.onChange({ target: { value: value, name: field.name } })
-}
+import CustomTag from './custom-tag'
 
 export interface DropdownSelectProps {
   labelText: string
   name: string
+  options: SelectOption[]
+}
+
+export interface SelectOption {
+  label: string
+  value: string
+  description: string
+  link: string
 }
 
-export const DropdownSelect: React.FC<SelectProps & DropdownSelectProps> = props => {
+export const DropdownSelect: React.FC<SelectProps & DropdownSelectProps> = ({ labelText, name, options }) => {
+  const handleRenderTags = (props: CustomTagProps) => {
+    const { value, onClose } = props
+    const option = options.find(option => option.value === value) as SelectOption
+    return <CustomTag label={option?.value} description={option.description} link={option.link} onClose={onClose} />
+  }
+
+  const handleChangeOption = field => value => {
+    field.onChange({ target: { value: value, name: field.name } })
+  }
+
   return (
     <div className="field pb-4">
       <div className="control">
-        <Field name={props.name}>
+        <Field name={name}>
           {({ field }: FieldProps<string | string[]>) => {
             return (
               <div className="field field-dropdown-select">
                 <label className="label" htmlFor="">
-                  {props.labelText}
+                  {labelText}
                 </label>
-                <Select {...props} onChange={handleChangeOption(field)}>
-                  {props.options?.map(option => (
-                    <Option value={option.value}>{option.label}</Option>
+                <Select
+                  className="is-primary input"
+                  dropdownClassName="abc"
+                  mode="tags"
+                  tagRender={handleRenderTags}
+                  onChange={handleChangeOption(field)}
+                >
+                  {options?.map((option: SelectOption) => (
+                    <Option key={option.value} value={option.value}>
+                      {option.label}
+                    </Option>
                   ))}
                 </Select>
               </div>

packages/elements/src/index.tsx

@@ -46,6 +46,7 @@ export * from './components/HelpGuide'
 export * from './components/HelpGuide/context'
 export * from './components/Notification'
 export * from './components/UploadProgress'
+export * from './components/DropdownSelect'
 
 // Utils
 export * from './utils/validators'