feat(accordion): add align prop to component and skeleton to change h…

…eading alignment (#4754)
carbon-design-system · Dec 5, 2019 · 4b257cb · 4b257cb
1 parent 5b9c3b3
commit 4b257cb
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 8 deletions.
diff --git a/packages/components/src/components/accordion/_accordion.scss b/packages/components/src/components/accordion/_accordion.scss
@@ -109,6 +109,20 @@
     }
   }
 
+  .#{$prefix}--accordion--start .#{$prefix}--accordion__heading {
+    // Reverse `$accordion-flex-direction` token:
+    flex-direction: row;
+  }
+
+  .#{$prefix}--accordion--start .#{$prefix}--accordion__arrow {
+    // Alters `$accordion-arrow-margin` token:
+    margin: 2px 0 0 $carbon--spacing-03;
+  }
+
+  .#{$prefix}--accordion--start .#{$prefix}--accordion__content {
+    margin-left: $carbon--spacing-06;
+  }
+
   .#{$prefix}--accordion__item--collapsing .#{$prefix}--accordion__content,
   .#{$prefix}--accordion__item--expanding .#{$prefix}--accordion__content {
     display: block;

diff --git a/packages/react/src/components/Accordion/Accordion-story.js b/packages/react/src/components/Accordion/Accordion-story.js
@@ -10,7 +10,13 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
-import { withKnobs, boolean, number, text } from '@storybook/addon-knobs';
+import {
+  withKnobs,
+  boolean,
+  number,
+  select,
+  text,
+} from '@storybook/addon-knobs';
 import {
   default as Accordion,
   AccordionItem,
@@ -28,7 +34,12 @@ storiesOf('Accordion', module)
   .add(
     'Default',
     () => (
-      <Accordion>
+      <Accordion
+        align={select(
+          'Accordion heading alignment (align)',
+          ['start', 'end'],
+          'end'
+        )}>
         <AccordionItem
           title={text('The title (title)', 'Section 1 title')}
           open={boolean('Open the section (open)', false)}
@@ -80,6 +91,11 @@ storiesOf('Accordion', module)
     () => (
       <div style={{ width: '500px' }}>
         <AccordionSkeleton
+          align={select(
+            'Accordion heading alignment (align)',
+            ['start', 'end'],
+            'end'
+          )}
           open={boolean('Show first item opened (open)', true)}
           count={number('Set number of items (count)', 4)}
         />

diff --git a/packages/react/src/components/Accordion/Accordion.Skeleton.js b/packages/react/src/components/Accordion/Accordion.Skeleton.js
@@ -15,8 +15,10 @@ import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
 
-function AccordionSkeleton({ open, count, className, ...rest }) {
-  const classes = cx(`${prefix}--accordion`, `${prefix}--skeleton`, className);
+function AccordionSkeleton({ align, open, count, className, ...rest }) {
+  const classes = cx(`${prefix}--accordion`, `${prefix}--skeleton`, className, {
+    [`${prefix}--accordion--${align}`]: align,
+  });
   const numSkeletonItems = open ? count - 1 : count;
   return (
     <ul className={classes} {...rest}>
@@ -61,11 +63,17 @@ AccordionSkeleton.propTypes = {
    * Specify an optional className to add.
    */
   className: PropTypes.string,
+
+  /**
+   * Specify the alignment of the accordion heading title and chevron.
+   */
+  align: PropTypes.oneOf(['start', 'end']),
 };
 
 AccordionSkeleton.defaultProps = {
   open: true,
   count: 4,
+  align: 'end',
 };
 
 function AccordionSkeletonItem() {

diff --git a/packages/react/src/components/Accordion/Accordion.js b/packages/react/src/components/Accordion/Accordion.js
@@ -12,15 +12,21 @@ import React from 'react';
 
 const { prefix } = settings;
 
-function Accordion({ children, className: customClassName, ...rest }) {
-  const className = cx(`${prefix}--accordion`, customClassName);
+function Accordion({ align, children, className: customClassName, ...rest }) {
+  const className = cx(`${prefix}--accordion`, customClassName, {
+    [`${prefix}--accordion--${align}`]: align,
+  });
   return (
     <ul className={className} {...rest}>
       {children}
     </ul>
   );
 }
 
+Accordion.defaultProps = {
+  align: 'end',
+};
+
 Accordion.propTypes = {
   /**
    * Pass in the children that will be rendered within the Accordion
@@ -31,6 +37,11 @@ Accordion.propTypes = {
    * Specify an optional className to be applied to the container node
    */
   className: PropTypes.string,
+
+  /**
+   * Specify the alignment of the accordion heading title and chevron.
+   */
+  align: PropTypes.oneOf(['start', 'end']),
 };
 
 export default Accordion;
diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
@@ -2,10 +2,11 @@
 
 exports[`Accordion should render 1`] = `
 <Accordion
+  align="end"
   className="extra-class"
 >
   <ul
-    className="bx--accordion extra-class"
+    className="bx--accordion extra-class bx--accordion--end"
   >
     <AccordionItem
       className="child"

diff --git a/...es/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap b/...es/react/src/components/Accordion/__tests__/__snapshots__/Accordion.Skeleton-test.js.snap
@@ -2,11 +2,12 @@
 
 exports[`AccordionSkeleton should render 1`] = `
 <AccordionSkeleton
+  align="end"
   count={4}
   open={true}
 >
   <ul
-    className="bx--accordion bx--skeleton"
+    className="bx--accordion bx--skeleton bx--accordion--end"
   >
     <li
       className="bx--accordion__item bx--accordion__item--active"