Merge release/v3.3.2 into main branch (#1269)

* fix alignment of Option with checkbox and description (#1267)

* REC-25 add a new accordion alert component (#1268)

Author: github-actions[bot]

package.json

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

src/Accordion/Accordion.mdx

@@ -65,3 +65,7 @@ When multiple Cards are stacked, you want to ensure there is proper content alig
 ### Disabled
 
 <Canvas of={ComponentStories.Disabled} />
+
+### Alert
+
+<Canvas of={ComponentStories.AccordionAlert} />

src/Accordion/Accordion.stories.tsx

@@ -390,3 +390,27 @@ Disabled.args = {
   helperText: 'helper text',
   title: 'Accordion Toggle -- disabled',
 };
+
+export const AccordionAlert = (args) => (
+  <Accordion>
+    <AccordionItem borderless eventKey="0" variant="info">
+      <AccordionToggle
+        eventKey="0"
+        {...args}
+      />
+      <AccordionCollapse eventKey="0" variant="info">
+        <div>
+          Add content here.
+        </div>
+      </AccordionCollapse>
+    </AccordionItem>
+  </Accordion>
+);
+
+AccordionAlert.args = {
+  chevronLateral: true,
+  chevronLeft: true,
+  disabled: false,
+  helperText: 'helper text',
+  title: 'Accordion Alert',
+};

src/Accordion/AccordionCollapse.scss

@@ -6,4 +6,13 @@
   &__container {
     padding: 16px 24px;
   }
+
+  &--info {
+    border-top: none !important;
+    color: var(--ux-gray-900);
+  }
+
+  &--noTopPadding {
+    padding-top: 0px !important;
+  }
 }

src/Accordion/AccordionCollapse.tsx

@@ -6,6 +6,7 @@ import RBAccordionCollapse from 'react-bootstrap/AccordionCollapse';
 import './AccordionCollapse.scss';
 
 type AccordionCollapseProps = {
+  variant?: string;
   children: React.ReactNode;
   /**
    A unique key used to control this item's collapse/expand.
@@ -16,6 +17,7 @@ type AccordionCollapseProps = {
 };
 
 const AccordionCollapse = ({
+  variant,
   children,
   eventKey,
 
@@ -25,17 +27,28 @@ const AccordionCollapse = ({
   ...props
 }: AccordionCollapseProps) => (
   <RBAccordionCollapse
-    className={classNames(UNSAFE_className, 'AccordionCollapse')}
+    className={classNames(
+      UNSAFE_className,
+      'AccordionCollapse',
+      variant === 'info' && 'AccordionCollapse--info',
+    )}
     eventKey={eventKey}
     {...props}
   >
-    <div className="AccordionCollapse__container">
+    <div
+      className={classNames(
+        UNSAFE_className,
+        'AccordionCollapse__container',
+        variant === 'info' && 'AccordionCollapse--noTopPadding',
+      )}
+    >
       {children}
     </div>
   </RBAccordionCollapse>
 );
 
 AccordionCollapse.defaultProps = {
+  variant: undefined,
   UNSAFE_className: undefined,
 };
 

src/Accordion/AccordionItem.scss

@@ -17,4 +17,9 @@
   &--borderless {
     border: none;
   }
+
+  &--info {
+    background-color: var(--ux-blue-100);
+    color: var(--ux-blue-800);
+  }
 }

src/Accordion/AccordionItem.tsx

@@ -18,9 +18,11 @@ type AccordionItemProps = {
   UNSAFE_className?: string;
   children: React.ReactNode;
   eventKey: string;
+  variant?: string;
 };
 
 const AccordionItem = ({
+  variant,
   as,
   borderless,
   children,
@@ -33,6 +35,7 @@ const AccordionItem = ({
     className={classNames(
       UNSAFE_className,
       'AccordionItem',
+      variant === 'info' && 'AccordionItem--info',
       borderless && 'AccordionItem--borderless',
     )}
     eventKey={eventKey}
@@ -42,6 +45,7 @@ const AccordionItem = ({
 );
 
 AccordionItem.defaultProps = {
+  variant: undefined,
   as: undefined,
   borderless: undefined,
   UNSAFE_className: undefined,

src/Select/Option.jsx

@@ -17,14 +17,16 @@ import './Option.scss';
 const Option = forwardRef(({ indeterminate, ...props }, ref) => (
   <components.Option {...props}>
     <div className="Option">
-      <CheckboxButton
-        checked={props.isSelected}
-        className="Checkbox"
-        id={props.label}
-        indeterminate={indeterminate}
-        ref={ref}
-        onChange={() => null}
-      />
+      <div className="CheckboxContainer">
+        <CheckboxButton
+          checked={props.isSelected}
+          className="Checkbox"
+          id={props.label}
+          indeterminate={indeterminate}
+          ref={ref}
+          onChange={() => null}
+        />
+      </div>
       <div className="TitleDescriptionContainer">
         <label
           className={classNames({

src/Select/Option.scss

@@ -1,8 +1,8 @@
 .Option {
   display: flex;
-  align-items: center;
-
+  
   .Checkbox {
+    margin-top: var(--synth-spacing-1);
     margin-right: var(--synth-spacing-3);
   }