marketgoo · luismarketgoo · Sep 19, 2023 · Aug 4, 2023 · Sep 7, 2023 · Sep 8, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [Unreleased]
+### Added
+- `multiple` prop to Select component
+
 ## [2.2.0] - 2023-09-07
 ### Added
 - New component `Toast`.

diff --git a/package.json b/package.json
@@ -79,6 +79,7 @@
     "@phosphor-icons/react": "2.0.9",
     "classnames": "^2.2.6",
     "dialog-polyfill": "^0.5.3",
-    "react-hook-form": "^7.21.0"
+    "react-hook-form": "^7.21.0",
+    "react-select": "^5.7.4"
   }
 }
diff --git a/src/Field/stories.js b/src/Field/stories.js
@@ -96,6 +96,23 @@ export const FieldSelect = (args) =>
     ]} />
   </Field>
 
+export const FieldSelectMultiple = (args) => { 
+  const options = [
+    { value: '1', label: 'Option 1' },
+    { value: '2', label: 'Option 2' },
+    { value: '3', label: 'Option 3' }
+  ]
+  const [baseSelect, setBaseSelect] = useState([options[0]])
+
+  return <Field {...args}>
+    <Select multiple value={baseSelect} onChange={setBaseSelect} options={[
+      { value: '1', label: 'Option 1' },
+      { value: '2', label: 'Option 2' },
+      { value: '3', label: 'Option 3' }
+    ]} />
+  </Field>
+}
+
 export const FieldSelectError = (args) =>
   <Field {...args}>
     <Select options={[

diff --git a/src/Select/__snapshots__/test.js.snap b/src/Select/__snapshots__/test.js.snap
@@ -3,6 +3,7 @@
 exports[`Default Page 1`] = `
 <select
   className="ola_select"
+  value={null}
 >
   <option
     value="chocolate"
@@ -31,6 +32,7 @@ exports[`Default defaultValue 1`] = `
 <select
   className="ola_select"
   defaultValue="strawberry"
+  value={null}
 >
   <option
     value="chocolate"

diff --git a/src/Select/index.js b/src/Select/index.js
@@ -1,14 +1,55 @@
-import React, {forwardRef} from 'react'
-import {default as PT} from 'prop-types'
+import React, { forwardRef } from 'react'
+import { default as PT } from 'prop-types'
 import cx from 'classnames'
 
-const SelectOption = ({ value, label, ...props }) =>  <option value={value} {...props}>{label}</option>
+const Select = forwardRef(({ options, error, disabled, className, multiple, ...props }, ref) => {
+  if (multiple) {
+    const SelectMultiple = require('react-select').default
+    const { components } = require('react-select')
+
+    const DropdownIndicator = ({ ...props }) => {
+      return <components.DropdownIndicator {...props}>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" viewBox="0 0 32 33" fill="none"><path d="M26.7075 12.7101L16.7075 22.7101C16.6146 22.803 16.5043 22.8768 16.3829 22.9271C16.2615 22.9775 16.1314 23.0034 16 23.0034C15.8686 23.0034 15.7385 22.9775 15.6171 22.9271C15.4957 22.8768 15.3854 22.803 15.2925 22.7101L5.29251 12.7101C5.10487 12.5224 4.99945 12.2679 4.99945 12.0026C4.99945 11.7372 5.10487 11.4827 5.29251 11.2951C5.48015 11.1074 5.73464 11.002 6.00001 11.002C6.26537 11.002 6.51987 11.1074 6.70751 11.2951L16 20.5888L25.2925 11.2951C25.3854 11.2022 25.4957 11.1285 25.6171 11.0782C25.7385 11.0279 25.8686 11.002 26 11.002C26.1314 11.002 26.2615 11.0279 26.3829 11.0782C26.5043 11.1285 26.6146 11.2022 26.7075 11.2951C26.8004 11.388 26.8741 11.4983 26.9244 11.6197C26.9747 11.7411 27.0006 11.8712 27.0006 12.0026C27.0006 12.134 26.9747 12.2641 26.9244 12.3855C26.8741 12.5069 26.8004 12.6172 26.7075 12.7101Z" fill="#1C1F22"/></svg>
+      </components.DropdownIndicator>
+    }
+
+    return (
+      <SelectMultiple
+        className={cx('ola_select', 'ola_select--multiple', {
+          'is-invalid': error,
+          'is-disabled': disabled
+        }, className)}
+        isMulti
+        closeMenuOnSelect={false}
+        closeMenuOnScroll
+        hideSelectedOptions
+        isSearchable
+        isClearable={false}
+        isDisabled={disabled}
+        options={options}
+        classNamePrefix="ola_select-multiple"
+        components={{ DropdownIndicator }}
+        classNames={{
+          control: ({ isFocused }) =>
+            cx('select--multiple', {
+              'is-focused': isFocused,
+            }),
+        }}
+        {...props}
+      />
+    )
+  }
+
+  const SelectOption = ({ value, label, ...props }) => 
+    <option value={value} {...props}>{label}</option>
 
-const Select = forwardRef(({ options, error, className, ...props }, ref) => {
   return (
     <select
       ref={ref}
-      className={cx('ola_select', {'is-invalid': error}, className)}
+      className={cx('ola_select', {
+        'is-invalid': error,
+        'is-disabled': disabled,
+      }, className)}
       {...props}>
       { options.map( (option, idx) => <SelectOption key={idx} {...option} /> ) }
     </select>
@@ -18,7 +59,10 @@ const Select = forwardRef(({ options, error, className, ...props }, ref) => {
 Select.defaultProps = {
   options: [],
   className: null,
-  error: false
+  error: false,
+  multiple: false,
+  value: null,
+  disabled: false,
 }
 
 Select.displayName = 'Select'
@@ -32,7 +76,11 @@ Select.propTypes = {
   /** Extra className */
   className: PT.string,
   /** Select is invalid */
-  error: PT.bool
+  error: PT.bool,
+  /** Indicates if the select allows multiple selection */
+  multiple: PT.bool,
+  value: PT.oneOfType([PT.arrayOf(PT.any), PT.any]),
+  disabled: PT.bool,
 }
 
 export default Select
diff --git a/src/Select/stories.js b/src/Select/stories.js
@@ -1,19 +1,21 @@
-import React from 'react'
+import React, { useState } from 'react'
 import Select from './'
 
+const options = [
+  { value: '', label: 'I\'m not sure' },
+  { value: 'chocolate', label: 'Chocolate' },
+  { value: 'strawberry', label: 'Strawberry' },
+  { value: 'vanilla', label: 'Vanilla' },
+]
+
 export default {
   title: 'Select',
   component: Select,
   args: {
-    options: [
-      { value: '', label: 'I\'m not sure' },
-      { value: 'chocolate', label: 'Chocolate' },
-      { value: 'strawberry', label: 'Strawberry' },
-      { value: 'vanilla', label: 'Vanilla' },
-      { value: '', label: 'None' }
-    ],
+    options,
     disabled: false,
-    error: false
+    error: false,
+    multiple: false
   },
   argTypes: {
     onClick: { action: 'clicked' },
@@ -23,6 +25,15 @@ export default {
 
 export const Base = (args) => <Select {...args}/>
 
+export const Multiple = (args) => {
+  const [baseSelect, setBaseSelect] = useState([options[0]])
+
+  return <Select value={baseSelect} {...args} onChange={setBaseSelect} />
+}
+Multiple.args = {
+  multiple: true
+}
+
 export const Error = (args) => <Select {...args}/>
 Error.args = {
   error: true

diff --git a/src/Select/style.css b/src/Select/style.css
@@ -1,56 +1,116 @@
 .ola_select {
-    appearance: none;
-    box-sizing: border-box;
-    height: var(--size-5);
-    width: 100%;
-    border: solid 1px var(--color-neutral-500);
+  appearance: none;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--size-5);
+  font: var(--font-1-regular);
+  outline: 0;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: initial;
+  max-width: 100%;
+
+  &:not(.ola_select--multiple) {
     color: var(--color-neutral-900);
+    border-radius: var(--radius-s);
     background-color: var(--color-white);
+    border: solid 1px var(--color-neutral-500);
+    padding: 0 var(--size-6) 0 var(--size-2);
     background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none"><path d="M26.7075 12.7101L16.7075 22.7101C16.6146 22.803 16.5043 22.8768 16.3829 22.9271C16.2615 22.9775 16.1314 23.0034 16 23.0034C15.8686 23.0034 15.7385 22.9775 15.6171 22.9271C15.4957 22.8768 15.3854 22.803 15.2925 22.7101L5.29251 12.7101C5.10487 12.5224 4.99945 12.2679 4.99945 12.0026C4.99945 11.7372 5.10487 11.4827 5.29251 11.2951C5.48015 11.1074 5.73464 11.002 6.00001 11.002C6.26537 11.002 6.51987 11.1074 6.70751 11.2951L16 20.5888L25.2925 11.2951C25.3854 11.2022 25.4957 11.1285 25.6171 11.0782C25.7385 11.0279 25.8686 11.002 26 11.002C26.1314 11.002 26.2615 11.0279 26.3829 11.0782C26.5043 11.1285 26.6146 11.2022 26.7075 11.2951C26.8004 11.388 26.8741 11.4983 26.9244 11.6197C26.9747 11.7411 27.0006 11.8712 27.0006 12.0026C27.0006 12.134 26.9747 12.2641 26.9244 12.3855C26.8741 12.5069 26.8004 12.6172 26.7075 12.7101Z" fill="black"/></svg>');
     background-repeat: no-repeat;
     background-position: calc(100% - var(--size-1)) center;
     background-size: var(--size-3);
-    border-radius: var(--radius-s);
-    font: var(--font-1-regular);
-    padding: 0 var(--size-6) 0 var(--size-2);
     transition-property: background-color, color, box-shadow, border-color;
     transition-duration: 200ms;
-    outline: 0;
-    white-space: nowrap;
-    text-decoration: none;
-    cursor: initial;
-    max-width: 100%;
-
-    &:hover {
-        border-color: var(--color-neutral-700);
-    }
 
     &:focus,
     &:focus-visible {
-        background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none"><path d="M26.7075 20.7101C26.6146 20.803 26.5043 20.8768 26.3829 20.9271C26.2615 20.9774 26.1314 21.0033 26 21.0033C25.8686 21.0033 25.7385 20.9774 25.6171 20.9271C25.4957 20.8768 25.3854 20.803 25.2925 20.7101L16 11.4163L6.70751 20.7101C6.51987 20.8977 6.26537 21.0031 6.00001 21.0031C5.73464 21.0031 5.48015 20.8977 5.29251 20.7101C5.10487 20.5224 4.99945 20.2679 4.99945 20.0026C4.99945 19.7372 5.10487 19.4827 5.29251 19.2951L15.2925 9.29506C15.3854 9.20208 15.4957 9.12832 15.6171 9.078C15.7385 9.02767 15.8686 9.00177 16 9.00177C16.1314 9.00177 16.2615 9.02767 16.3829 9.078C16.5043 9.12832 16.6146 9.20208 16.7075 9.29506L26.7075 19.2951C26.8005 19.3879 26.8742 19.4982 26.9246 19.6196C26.9749 19.741 27.0008 19.8711 27.0008 20.0026C27.0008 20.134 26.9749 20.2641 26.9246 20.3855C26.8742 20.5069 26.8005 20.6172 26.7075 20.7101Z" fill="black"/></svg>');
-        border-color: var(--color-primary-500);
-        box-shadow: var(--shadow-focus);
+      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none"><path d="M26.7075 20.7101C26.6146 20.803 26.5043 20.8768 26.3829 20.9271C26.2615 20.9774 26.1314 21.0033 26 21.0033C25.8686 21.0033 25.7385 20.9774 25.6171 20.9271C25.4957 20.8768 25.3854 20.803 25.2925 20.7101L16 11.4163L6.70751 20.7101C6.51987 20.8977 6.26537 21.0031 6.00001 21.0031C5.73464 21.0031 5.48015 20.8977 5.29251 20.7101C5.10487 20.5224 4.99945 20.2679 4.99945 20.0026C4.99945 19.7372 5.10487 19.4827 5.29251 19.2951L15.2925 9.29506C15.3854 9.20208 15.4957 9.12832 15.6171 9.078C15.7385 9.02767 15.8686 9.00177 16 9.00177C16.1314 9.00177 16.2615 9.02767 16.3829 9.078C16.5043 9.12832 16.6146 9.20208 16.7075 9.29506L26.7075 19.2951C26.8005 19.3879 26.8742 19.4982 26.9246 19.6196C26.9749 19.741 27.0008 19.8711 27.0008 20.0026C27.0008 20.134 26.9749 20.2641 26.9246 20.3855C26.8742 20.5069 26.8005 20.6172 26.7075 20.7101Z" fill="black"/></svg>');
     }
 
-    &:invalid,
-    &.is-invalid {
-        border-color: var(--color-negative-500);
+    &:disabled {
+      background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none"><path d="M26.7075 12.7101L16.7075 22.7101C16.6146 22.803 16.5043 22.8768 16.3829 22.9271C16.2615 22.9775 16.1314 23.0034 16 23.0034C15.8686 23.0034 15.7385 22.9775 15.6171 22.9271C15.4957 22.8768 15.3854 22.803 15.2925 22.7101L5.29251 12.7101C5.10487 12.5224 4.99945 12.2679 4.99945 12.0026C4.99945 11.7372 5.10487 11.4827 5.29251 11.2951C5.48015 11.1074 5.73464 11.002 6.00001 11.002C6.26537 11.002 6.51987 11.1074 6.70751 11.2951L16 20.5888L25.2925 11.2951C25.3854 11.2022 25.4957 11.1285 25.6171 11.0782C25.7385 11.0279 25.8686 11.002 26 11.002C26.1314 11.002 26.2615 11.0279 26.3829 11.0782C26.5043 11.1285 26.6146 11.2022 26.7075 11.2951C26.8004 11.388 26.8741 11.4983 26.9244 11.6197C26.9747 11.7411 27.0006 11.8712 27.0006 12.0026C27.0006 12.134 26.9747 12.2641 26.9244 12.3855C26.8741 12.5069 26.8004 12.6172 26.7075 12.7101Z" fill="#C5CCD4"/></svg>');
+    }
+  }
 
-        &:focus,
-        &:focus-visible {
-            box-shadow: var(--shadow-focus-negative);
-        }
+  &:hover {
+    border-color: var(--color-neutral-700);
+  }
+
+  &:focus,
+  &:focus-visible {
+    border-color: var(--color-primary-500);
+    box-shadow: var(--shadow-focus);
+  }
+
+  &.ola_select--multiple .select--multiple {
+    min-height: var(--size-5);
+    border: solid 1px var(--color-neutral-500);
+    color: var(--color-neutral-900);
+    background-color: var(--color-white);
+    border-radius: var(--radius-s);
+
+    &.is-focused {
+      border-color: var(--color-primary-500);
+      box-shadow: var(--shadow-focus);
+    }
+
+    & .ola_select-multiple__indicator-separator {
+      display: none;
+    }
+
+    & .ola_select-multiple__indicator {
+      padding: 0 8px;
+    }
+
+    & .ola_select-multiple__multi-value {
+      background-color: var(--color-neutral-100);
+      font: var(--font-0-bold);
+      color: var(--color-neutral-700);
+      margin-left: var(--size-0);
+      margin-right: var(--size-0);
+      border-radius: var(--radius-s);
+
+      & .ola_select-multiple__multi-value__remove {
+        cursor: pointer;
+        transition: background-color .1s, color .1s;
 
         &:hover {
-            border-color: var(--color-negative-700);
+          background-color: var(--color-neutral-300);
+          color: var(--color-neutral-900);
         }
+      }
     }
+  }
 
-    &:disabled {
-        color: var(--color-neutral-300);
-        border-color: var(--color-neutral-300);
-        background-color: var(--color-neutral-100);
-        background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="33" viewBox="0 0 32 33" fill="none"><path d="M26.7075 12.7101L16.7075 22.7101C16.6146 22.803 16.5043 22.8768 16.3829 22.9271C16.2615 22.9775 16.1314 23.0034 16 23.0034C15.8686 23.0034 15.7385 22.9775 15.6171 22.9271C15.4957 22.8768 15.3854 22.803 15.2925 22.7101L5.29251 12.7101C5.10487 12.5224 4.99945 12.2679 4.99945 12.0026C4.99945 11.7372 5.10487 11.4827 5.29251 11.2951C5.48015 11.1074 5.73464 11.002 6.00001 11.002C6.26537 11.002 6.51987 11.1074 6.70751 11.2951L16 20.5888L25.2925 11.2951C25.3854 11.2022 25.4957 11.1285 25.6171 11.0782C25.7385 11.0279 25.8686 11.002 26 11.002C26.1314 11.002 26.2615 11.0279 26.3829 11.0782C26.5043 11.1285 26.6146 11.2022 26.7075 11.2951C26.8004 11.388 26.8741 11.4983 26.9244 11.6197C26.9747 11.7411 27.0006 11.8712 27.0006 12.0026C27.0006 12.134 26.9747 12.2641 26.9244 12.3855C26.8741 12.5069 26.8004 12.6172 26.7075 12.7101Z" fill="#C5CCD4"/></svg>');
-        cursor: not-allowed;
+  &:invalid,
+  &.is-invalid,
+  &.is-invalid .select--multiple {
+    border-color: var(--color-negative-500);
+    outline: 0;
+
+    &:focus,
+    &:focus-visible,
+    &.is-focused {
+      box-shadow: var(--shadow-focus-negative);
+      border-color: var(--color-negative-500);
+    }
+
+    &:hover {
+      border-color: var(--color-negative-700);
+    }
+  }
+
+  &:disabled,
+  &.is-disabled,
+  &.is-disabled .select--multiple {
+    color: var(--color-neutral-300);
+    border-color: var(--color-neutral-300);
+    background-color: var(--color-neutral-100);
+    cursor: not-allowed;
+
+    & .ola_select-multiple__multi-value__remove {
+      display: none;
     }
+  }
 }