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

Author: magicmarie

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,