From 30ce66c5107853b175958ae6d4aeeb6e5dee1655 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 15 Oct 2020 10:05:56 -0700
Subject: [PATCH] feat(accordion): add size variants to Accordion (#7038)

Co-authored-by: jeanservaas <43144260+jeanservaas@users.noreply.github.com>
---
 .../src/components/accordion/_accordion.scss           | 10 ++++++++++
 .../__tests__/__snapshots__/PublicAPI-test.js.snap     |  9 +++++++++
 .../react/src/components/Accordion/Accordion-story.js  |  9 +++++++++
 packages/react/src/components/Accordion/Accordion.js   |  7 +++++++
 4 files changed, 35 insertions(+)

diff --git a/packages/components/src/components/accordion/_accordion.scss b/packages/components/src/components/accordion/_accordion.scss
index 21b6418033e5..8bacb3b7367e 100644
--- a/packages/components/src/components/accordion/_accordion.scss
+++ b/packages/components/src/components/accordion/_accordion.scss
@@ -72,6 +72,16 @@
     }
   }
 
+  // Size styles
+  .#{$prefix}--accordion--xl .#{$prefix}--accordion__heading {
+    min-height: rem(48px);
+  }
+
+  .#{$prefix}--accordion--sm .#{$prefix}--accordion__heading {
+    min-height: rem(32px);
+    padding: rem(5px) 0;
+  }
+
   // Disabled styles
   .#{$prefix}--accordion__heading[disabled] {
     color: $disabled-02;
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index a01d0e4ea10d..be64a0fc16f2 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -25,6 +25,15 @@ Map {
       "disabled": Object {
         "type": "bool",
       },
+      "size": Object {
+        "args": Array [
+          Array [
+            "sm",
+            "xl",
+          ],
+        ],
+        "type": "oneOf",
+      },
     },
   },
   "AccordionItem" => Object {
diff --git a/packages/react/src/components/Accordion/Accordion-story.js b/packages/react/src/components/Accordion/Accordion-story.js
index 3a8bd0a9b027..e31c35e9b8bb 100644
--- a/packages/react/src/components/Accordion/Accordion-story.js
+++ b/packages/react/src/components/Accordion/Accordion-story.js
@@ -87,9 +87,18 @@ const props = {
   onHeadingClick: action('onHeadingClick'),
 };
 
+const sizes = {
+  'Extra large size (xl)': 'xl',
+  'Default size': undefined,
+  'Small size (sm)': 'sm',
+};
+
 export const playground = () => (
   <Accordion
     disabled={boolean('Disable entire Accordion (disabled)', false)}
+    size={
+      select('Accordion heading size (size)', sizes, undefined) || undefined
+    }
     align={select(
       'Accordion heading alignment (align)',
       ['start', 'end'],
diff --git a/packages/react/src/components/Accordion/Accordion.js b/packages/react/src/components/Accordion/Accordion.js
index 2d89f9c5a26c..790c9b147ce4 100644
--- a/packages/react/src/components/Accordion/Accordion.js
+++ b/packages/react/src/components/Accordion/Accordion.js
@@ -17,10 +17,12 @@ function Accordion({
   children,
   className: customClassName,
   disabled,
+  size,
   ...rest
 }) {
   const className = cx(`${prefix}--accordion`, customClassName, {
     [`${prefix}--accordion--${align}`]: align,
+    [`${prefix}--accordion--${size}`]: size,
   });
   return (
     <ul className={className} {...rest}>
@@ -57,6 +59,11 @@ Accordion.propTypes = {
    * Specify whether an individual AccordionItem should be disabled
    */
   disabled: PropTypes.bool,
+
+  /**
+   * Specify the size of the Accordion. Currently supports either `sm` or `xl` as an option.
+   */
+  size: PropTypes.oneOf(['sm', 'xl']),
 };
 
 export default Accordion;