feat(accordion): add size variants to Accordion (#7038)

Co-authored-by: jeanservaas <43144260+jeanservaas@users.noreply.github.com>
carbon-design-system · Oct 15, 2020 · 30ce66c · 30ce66c
1 parent f84982b
commit 30ce66c
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;