Adds description to Option (#1258)

Author: tjbarber

src/Select/Option.jsx

@@ -1,4 +1,5 @@
 import React, { forwardRef } from 'react';
+import classNames from 'classnames';
 import { components } from 'react-select';
 
 import CheckboxButton from 'src/CheckboxButton';
@@ -24,10 +25,21 @@ const Option = forwardRef(({ indeterminate, ...props }, ref) => (
         ref={ref}
         onChange={() => null}
       />
-      <label>{props.label}</label>
+      <div className="TitleDescriptionContainer">
+        <label
+          className={classNames({
+            'Label--bold': props.description,
+          })}
+        >
+          {props.label}
+        </label>
+        { props.description && (
+          <span className="Description">{ props.description }</span>
+        )}
+      </div>
     </div>
   </components.Option>
-  ));
+));
 /* eslint-enable react/prop-types */
 
 export default Option;

src/Select/Option.scss

@@ -5,4 +5,19 @@
   .Checkbox {
     margin-right: var(--synth-spacing-3);
   }
+
+  .TitleDescriptionContainer {
+    display: flex;
+    flex-direction: column;
+
+    .Label {
+      &--bold {
+        font-weight: var(--synth-font-weight-bold);
+      }
+    }
+
+    .Description {
+      color: var(--ux-gray-800);
+    }
+  }
 }

src/Select/SingleSelect.stories.jsx

@@ -20,10 +20,26 @@ export default {
 };
 
 const options = [
-  { label: '1-on-1 interview', value: 1 },
-  { label: 'Focus group', value: 2 },
-  { label: 'Multi-day study', value: 3 },
-  { label: 'Unmoderated task', value: 4 },
+  {
+    label: '1-on-1 interview',
+    value: 1,
+    description: 'Interviews are typically a conversation between you and a researcher.',
+  },
+  {
+    label: 'Focus group',
+    value: 2,
+    description: 'Focus groups involve interacting with a small group of your peers.',
+  },
+  {
+    label: 'Multi-day study',
+    value: 3,
+    description: 'Diary and multiday studies are days or weeks long commitments.',
+  },
+  {
+    label: 'Unmoderated task',
+    value: 4,
+    description: 'An unmoderated task is just that—an opportunity for a user to try out a product, app, website, etc and share feedback.',
+  },
 ];
 
 const peopleOptions = [
@@ -168,6 +184,32 @@ export const GroupedOptions = () => {
   );
 };
 
+export const CustomOptionWithDescriptionAndCheckbox = () => (
+  <FormGroup
+    label="Custom Option with Description And Checkbox"
+    labelHtmlFor="custom-option-with-description-and-checkbox-select"
+  >
+    <SingleSelect
+      components={{
+        Option: ({ ...props }) => (
+          <Option
+            {...props}
+            // eslint-disable-next-line react/prop-types
+            description={props.data.description}
+          />
+        ),
+      }}
+      inputId="custom-option-with-description-select"
+      options={options}
+      onChange={onChange}
+    />
+  </FormGroup>
+);
+
+/**
+  If you're adding a new code, prefer the use of `Option` with a `description` prop.
+  `OptionWithDescription` is effectively deprecated and will be merged into `Option`.
+ */
 export const CustomOptionWithDescription = () => {
   const optionsWithDescriptions = [
     {