Dropdown component complete.

packages/components/src/components/Dropdown/Dropdown.style.ts

@@ -31,7 +31,7 @@ export let makeStyles = ({
     container: css`
       position: relative;
       width: 100%;
-      height: 50px;
+      height: 48px;
       display: inline-flex;
       cursor: ${disabled ? "not-allowed" : "default"};
     `,
@@ -50,6 +50,10 @@ export let makeStyles = ({
       color: ${error ? colors.error : colors.gray[400]};
       padding: 0 ${spacing.xxxxl} 0 ${spacing.s};
       background-color: ${colors.black};
+      font-size: ${typography.sizes.body2};
+      &::selection {
+        background-color: transparent;
+      }
     `,
     input: css`
       display: none;
@@ -59,14 +63,23 @@ export let makeStyles = ({
       border: none;
       color: ${colors.white};
       outline: none;
+      font-size: ${typography.sizes.body2};
+      padding: 5px 0;
     `,
-    icon: css`
+    iconOpen: css`
       color: ${colors.gray[300]};
       font-size: ${typography.sizes.icon.medium};
       position: absolute;
       top: ${spacing.m};
       right: ${spacing.s};
     `,
+    iconClose: css`
+      color: ${colors.blue[500]};
+      font-size: ${typography.sizes.icon.medium};
+      position: absolute;
+      top: ${spacing.m};
+      right: ${spacing.s};
+    `,
     helper: css`
       color: ${error ? colors.error : colors.gray[400]};
       font-size: ${typography.sizes.caption};
@@ -82,6 +95,7 @@ export let makeStyles = ({
     `,
     option: css`
       padding: ${spacing.s};
+      font-size: ${typography.sizes.body2};
       &:hover {
         background-color: ${colors.gray[600]}
       }

packages/components/src/components/Dropdown/Dropdown.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from "react"
 import { makeStyles, DropdownStyleProps } from "./Dropdown.style"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faChevronDown } from "@fortawesome/free-solid-svg-icons"
+import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons"
 import { spacing } from "./../../theme"
 
 type DropdownOption = {
@@ -23,7 +23,7 @@ export default function Dropdown({
   value = "",
   options,
   disabled = false,
-  onChange,
+  onChange = () => {},
   ...styleProps
 }: DropdownProps) {
 
@@ -68,7 +68,12 @@ export default function Dropdown({
             disabled={true}
             value={inputTextValue}
           />
-          <FontAwesomeIcon icon={faChevronDown} css={styles.icon} />
+          {!showOptions && 
+            <FontAwesomeIcon icon={faChevronDown} css={styles.iconOpen} />
+          }
+          {!!showOptions && 
+            <FontAwesomeIcon icon={faChevronUp} css={styles.iconClose} />
+          }
         </div>
         {showOptions &&
           <div css={styles.options}>

packages/components/stories/07-Dropdown.stories.tsx

@@ -23,13 +23,24 @@ const options = [
 
 export const Primary = () => (
   <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
-    <Dropdown label="Label" options={options} onChange={(option) => console.log(option)} />
+    <Dropdown label="Label" options={options} />
   </div>
 )
 
 export const PrimaryWithValue = () => (
   <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
-    <Dropdown label="Label" options={options} value={options[1].value} onChange={(option) => console.log(option)} />
+    <Dropdown label="Label" options={options} value={options[1].value} />
   </div>
 )
 
+export const PrimaryFocus = () => (
+  <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
+    <Dropdown label="Label" options={options} focus={true} />
+  </div>
+)
+
+export const PrimaryError = () => (
+  <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
+    <Dropdown label="Label" options={options} error={true} />
+  </div>
+)