Merge release/v3.3.0 into main branch (#1262)

* noMargin prop for FormGroup (#1261)

* Adds description to `Option` (#1258)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "dependencies": {
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.4.0",

scss/forms/form_group.scss

@@ -54,6 +54,10 @@
     }
   }
 
+  &--no-margin {
+    margin: 0;
+  }
+
   &__helper-text {
     @include synth-font-type-20;
     color: var(--ux-gray-900);

src/FormGroup/FormGroup.mdx

@@ -42,6 +42,12 @@ be beneficial to the user
 
 <Canvas of={ComponentStories.Required} />
 
+### No margin
+
+- Remove the default margin on the FormGroup.
+
+<Canvas of={ComponentStories.NoMargin} />
+
 ### With Label Tooltip
 
 - Information users will typically only reference once (and then it's learned) or here and there.

src/FormGroup/FormGroup.stories.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { faSearch } from '@fortawesome/pro-solid-svg-icons';
 
+import { FlexContainer } from 'src/FlexContainer';
 import FormGroup from '.';
 import Input from '../Input';
 import FormControlLabel from '../FormControlLabel';
@@ -56,6 +57,27 @@ export const Required = () => (
   </FormGroup>
 );
 
+export const NoMargin = () => (
+  <FlexContainer flexDirection="column" gap={4}>
+    <FormGroup
+      label="Label"
+      labelHtmlFor="no-margin-1-input"
+      noMargin
+      required
+    >
+      <InputComponent id="no-margin-1-input" placeholder="This FormGroup has no default margin" />
+    </FormGroup>
+    <FormGroup
+      label="Label"
+      labelHtmlFor="no-margin-2-input"
+      noMargin
+      required
+    >
+      <InputComponent id="no-margin-2-input" placeholder="This FormGroup has no default margin" />
+    </FormGroup>
+  </FlexContainer>
+);
+
 export const WithLabelTooltip = () => (
   <FormGroup
     id="with-label"

src/FormGroup/FormGroup.tsx

@@ -57,6 +57,7 @@ export type FormGroupProps = {
   labelHelperText?: string;
   labelHtmlFor?: string;
   labelTooltip?: React.ReactNode;
+  noMargin?: boolean;
   required?: boolean;
 };
 
@@ -76,6 +77,7 @@ export default function FormGroup({
   labelHelperText,
   labelHtmlFor = '',
   labelTooltip,
+  noMargin,
   required,
 }: FormGroupProps) {
   const errorMessage = buildErrorMessage(errors[inputKey || ''], label);
@@ -137,6 +139,7 @@ export default function FormGroup({
            'FormGroup--is-invalid': hasErrors,
            'FormGroup--bordered': bordered,
            'FormGroup--inline': inline,
+           'FormGroup--no-margin': noMargin,
          },
        ),
        id,

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 = [
     {