Add selects. Add add-on profile for using the widgets in default Volto.

package.json

@@ -55,8 +55,7 @@
   },
   "dependencies": {
     "jest-axe": "4.1.0",
-    "razzle-plugin-scss": "3.3.9",
-    "theme-ui": "0.6.0-alpha.3"
+    "razzle-plugin-scss": "3.3.9"
   },
   "devDependencies": {
     "eslint-plugin-prettier": "3.1.3",

src/components/DesignSystem/DesignSystem.jsx

@@ -12,6 +12,9 @@ const DesignSystem = () => {
         <li>
           <Link to="/designsystem/textarea">Textarea</Link>
         </li>
+        <li>
+          <Link to="/designsystem/select">Select</Link>
+        </li>
       </ul>
     </Container>
   );

src/components/DesignSystem/Input.jsx

@@ -1,9 +1,9 @@
-/** @jsx jsx */
-import { jsx } from 'theme-ui';
-import { Grid } from 'theme-ui';
-import { Container } from 'semantic-ui-react';
+import React from 'react';
+// /** @jsx jsx */
+// import { jsx } from 'theme-ui';
+// import { Grid } from 'theme-ui';
+import { Container, Grid } from 'semantic-ui-react';
 import Input from '../Input/Input';
-import TextArea from '../TextArea/TextArea';
 
 const DesignSystem = () => {
   return (

src/components/DesignSystem/Select.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Container } from 'semantic-ui-react';
+import { SelectWidgetComponent as SelectWidget } from '../Select/SelectWidget';
+import Input from '../Input/Input';
+
+const DesignSystem = () => {
+  return (
+    <Container>
+      <div style={{ width: '300px' }}>
+        <SelectWidget
+          id="SelectWidget"
+          title="Select Field"
+          choices={[
+            ['Foo', 'Foo'],
+            ['Bar', 'Bar'],
+            ['Foo', 'Foo'],
+          ]}
+          description="Optional help text"
+          placeholder="Type something…"
+        />
+      </div>
+    </Container>
+  );
+};
+
+export default DesignSystem;

src/components/DesignSystem/TextArea.jsx

@@ -1,7 +1,8 @@
-/** @jsx jsx */
-import { jsx } from 'theme-ui';
-import { Grid } from 'theme-ui';
-import { Container } from 'semantic-ui-react';
+import React from 'react';
+// /** @jsx jsx */
+// import { jsx } from 'theme-ui';
+// import { Grid } from 'theme-ui';
+import { Container, Grid } from 'semantic-ui-react';
 import TextArea from '../TextArea/TextArea';
 
 const DesignSystem = () => {

src/components/Input/Input.jsx

@@ -4,7 +4,16 @@ import FormFieldWrapper from '../FormFieldWrapper/FormFieldWrapper';
 import cx from 'classnames';
 
 const Input = (props) => {
-  const { error, id, placeholder } = props;
+  const {
+    error,
+    id,
+    minLength,
+    maxLength,
+    onChange,
+    onClick,
+    placeholder,
+    value,
+  } = props;
 
   return (
     <FormFieldWrapper {...props} className="text">
@@ -14,6 +23,13 @@ const Input = (props) => {
         className={cx('q input', { error: error })}
         id={`field-${id}`}
         placeholder={placeholder || ' '}
+        value={value || ''}
+        onClick={() => onClick()}
+        minLength={minLength || null}
+        maxLength={maxLength || null}
+        onChange={({ target }) =>
+          onChange(id, target.value === '' ? undefined : target.value)
+        }
         {...props}
       />
     </FormFieldWrapper>

src/components/Select/SelectStyling.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import loadable from '@loadable/component';
+
+import { Icon } from '@plone/volto/components';
+
+import downSVG from '@plone/volto/icons/down-key.svg';
+import upSVG from '@plone/volto/icons/up-key.svg';
+import checkSVG from '@plone/volto/icons/check.svg';
+
+const ReactSelect = loadable.lib(() => import('react-select'));
+
+export const Option = (props) => {
+  return (
+    <ReactSelect>
+      {({ components }) => (
+        <components.Option {...props}>
+          <div className="label">{props.label}</div>
+          {/* {props.isFocused && !props.isSelected && (
+            <Icon name={checkSVG} size="24px" color="#b8c6c8" />
+          )}
+          {props.isSelected && (
+            <Icon name={checkSVG} size="24px" color="#007bc1" />
+          )} */}
+        </components.Option>
+      )}
+    </ReactSelect>
+  );
+};
+
+export const DropdownIndicator = (props) => {
+  return (
+    <ReactSelect>
+      {({ components }) => (
+        <components.DropdownIndicator {...props}>
+          {props.selectProps.menuIsOpen ? (
+            <Icon name={upSVG} size="18px" color="#007bc1" />
+          ) : (
+            <Icon name={downSVG} size="18px" color="#007bc1" />
+          )}
+        </components.DropdownIndicator>
+      )}
+    </ReactSelect>
+  );
+};
+
+export const selectTheme = (theme) => ({
+  ...theme,
+  colors: {
+    ...theme.colors,
+    primary25: 'hotpink',
+    primary: '#b8c6c8',
+  },
+});
+
+export const customSelectStyles = {
+  control: (styles, state) => ({
+    ...styles,
+    backgroundColor: state.isFocused ? '#fff !important' : null,
+    boxShadow: state.isFocused ? 'inset 0 0 0 3px #349ef4 !important' : null,
+    outline: 0,
+  }),
+  input: (styles, state) => ({
+    ...styles,
+    padding: 0,
+    margin: 0,
+  }),
+  menu: (styles, state) => ({
+    ...styles,
+    top: null,
+    marginTop: 0,
+    zIndex: 2,
+    backgroundColor: '#FFFFFF',
+    boxShadow:
+      '0px 3px 6px rgba(2, 19, 34, 0.12), 0px 2px 4px rgba(2, 19, 34, 0.06)',
+    borderRadius: '6px',
+  }),
+  indicatorSeparator: (styles) => ({
+    ...styles,
+    width: null,
+  }),
+  valueContainer: (styles) => ({
+    ...styles,
+    padding: 0,
+  }),
+  dropdownIndicator: (styles) => ({
+    paddingRight: 0,
+    maxHeight: '21px',
+    display: 'flex',
+  }),
+  option: (styles, state) => ({
+    ...styles,
+    backgroundColor: state.isSelected ? '#d2d9df' : null,
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '12px 12px',
+    color: state.isSelected
+      ? '#007bc1'
+      : state.isFocused
+      ? '#4a4a4a'
+      : 'inherit',
+    ':active': {
+      backgroundColor: null,
+    },
+    svg: {
+      flex: '0 0 auto',
+    },
+  }),
+};