[WALL-2135][BpkAccordion] Fix accordion wothout divider (#3559)

[WALL-2135][BpkAccordion] Fix accordion wothout divider (#3559) * fix accordion divider issues * add without divider on dark example story * update snapshots --------- Co-authored-by: Tom Brown <tom.brown@skyscanner.net>
Skyscanner · Jul 25, 2024 · 3556a4e · 3556a4e
1 parent d8e86fb
commit 3556a4e
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 65 deletions.
diff --git a/examples/bpk-component-accordion/examples.js b/examples/bpk-component-accordion/examples.js
@@ -390,6 +390,22 @@ const SingleItemExampleWithoutDivider = () => (
   </SingleItemAccordion>
 );
 
+const SingleItemExampleWithoutDividerOnDark = () => (
+  <div style={{ backgroundColor: surfaceContrastDay }}>
+    <SingleItemAccordion divider={false} onDark>
+      <BpkAccordionItem id="stops" title="Stops" initiallyExpanded>
+        <StopsContent />
+      </BpkAccordionItem>
+      <BpkAccordionItem id="airlines" title="Airlines">
+        <AirlinesContent />
+      </BpkAccordionItem>
+      <BpkAccordionItem id="airports" title="Airports">
+        <AirportsContent />
+      </BpkAccordionItem>
+    </SingleItemAccordion>
+  </div>
+);
+
 export {
   SingleItemExample,
   SingleItemExampleInitiallyExpandedExample,
@@ -403,4 +419,5 @@ export {
   WithSeoContentExample,
   WithSeoContentOnDarkExample,
   SingleItemExampleWithoutDivider,
+  SingleItemExampleWithoutDividerOnDark,
 };
diff --git a/examples/bpk-component-accordion/stories.js b/examples/bpk-component-accordion/stories.js
@@ -16,8 +16,6 @@
  * limitations under the License.
  */
 
-
-
 import BpkAccordion from '../../packages/bpk-component-accordion/src/BpkAccordion';
 import BpkAccordionItem from '../../packages/bpk-component-accordion/src/BpkAccordionItem';
 
@@ -34,8 +32,12 @@ import {
   WithSeoContentExample,
   WithSeoContentOnDarkExample,
   SingleItemExampleWithoutDivider,
+  SingleItemExampleWithoutDividerOnDark,
 } from './examples';
-import { WithSingleItemAccordionStateMock, WithAccordionItemStateMock } from './stories-utils';
+import {
+  WithSingleItemAccordionStateMock,
+  WithAccordionItemStateMock,
+} from './stories-utils';
 
 export default {
   title: 'bpk-component-accordion',
@@ -70,11 +72,12 @@ export const WithContent = WithSeoContentExample;
 export const WithSeoContentOnDark = WithSeoContentOnDarkExample;
 
 export const WithoutDivider = SingleItemExampleWithoutDivider;
+export const WithoutDividerOnDark = SingleItemExampleWithoutDividerOnDark;
 
 export const VisualTest = SingleItemExample;
 export const VisualTestOnDark = WithDarkBackgroundExample;
 
 export const VisualTestWithZoom = VisualTest.bind({});
 VisualTestWithZoom.args = {
-  zoomEnabled: true
-};
+  zoomEnabled: true,
+};
diff --git a/packages/bpk-component-accordion/src/BpkAccordionItem.js b/packages/bpk-component-accordion/src/BpkAccordionItem.js
@@ -53,6 +53,10 @@ const BpkAccordionItem = (props: Props) => {
   const titleTextClassNames = [getClassName('bpk-accordion__title-text')];
   const titleClassNames = [getClassName('bpk-accordion__title')];
   const contentClassNames = [getClassName('bpk-accordion__content-container')];
+  const contentInnerClassNames = [
+    getClassName('bpk-accordion__content-inner-container'),
+  ];
+
   const {
     children,
     expanded,
@@ -71,6 +75,20 @@ const BpkAccordionItem = (props: Props) => {
   // $FlowFixMe[prop-missing] - see above
   delete rest.initiallyExpanded;
 
+  if (divider) {
+    contentInnerClassNames.push(
+      getClassName('bpk-accordion__content-inner-container--with-divider'),
+    );
+
+    if (onDark) {
+      itemClassNames.push(
+        getClassName('bpk-accordion__item--with-divider-on-dark'),
+      );
+    } else {
+      itemClassNames.push(getClassName('bpk-accordion__item--with-divider'));
+    }
+  }
+
   if (onDark) {
     itemClassNames.push(getClassName('bpk-accordion__item--on-dark'));
   }
@@ -79,11 +97,6 @@ const BpkAccordionItem = (props: Props) => {
     iconClassNames.push(
       getClassName('bpk-accordion__item-expand-icon--flipped'),
     );
-    if (divider) {
-      contentClassNames.push(
-        getClassName('bpk-accordion__content-container--expanded'),
-      );
-    }
   }
 
   if (expanded && onDark) {
@@ -93,11 +106,6 @@ const BpkAccordionItem = (props: Props) => {
     iconClassNames.push(
       getClassName('bpk-accordion__item-expand-icon--on-dark'),
     );
-    if (divider) {
-      contentClassNames.push(
-        getClassName('bpk-accordion__content-container--expanded-on-dark'),
-      );
-    }
     titleTextClassNames.push(
       getClassName('bpk-accordion__title-text--on-dark'),
     );
@@ -107,20 +115,12 @@ const BpkAccordionItem = (props: Props) => {
     iconClassNames.push(
       getClassName('bpk-accordion__item-expand-icon--on-dark'),
     );
-    if (divider) {
-      titleClassNames.push(
-        getClassName('bpk-accordion__title--collapsed-on-dark'),
-      );
-    }
+
     titleTextClassNames.push(
       getClassName('bpk-accordion__title-text--on-dark'),
     );
   }
 
-  if (!expanded && !onDark && divider) {
-    titleClassNames.push(getClassName('bpk-accordion__title--collapsed'));
-  }
-
   const contentId = `${id}_content`;
   const clonedIcon = icon
     ? cloneElement(icon, {
@@ -130,7 +130,7 @@ const BpkAccordionItem = (props: Props) => {
 
   return (
     // $FlowFixMe[cannot-spread-inexact] - inexact rest. See decisions/flowfixme.md
-    <div id={id} className={getClassName('bpk-accordion__item')} {...rest}>
+    <div id={id} className={itemClassNames.join(' ')} {...rest}>
       <div className={titleClassNames.join(' ')}>
         <button
           type="button"
@@ -156,11 +156,7 @@ const BpkAccordionItem = (props: Props) => {
       </div>
       <div id={contentId} className={contentClassNames.join(' ')}>
         <AnimateHeight duration={200} height={expanded ? 'auto' : 0}>
-          <div
-            className={getClassName('bpk-accordion__content-inner-container')}
-          >
-            {children}
-          </div>
+          <div className={contentInnerClassNames.join(' ')}>{children}</div>
         </AnimateHeight>
       </div>
     </div>

diff --git a/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss b/packages/bpk-component-accordion/src/BpkAccordionItem.module.scss
@@ -22,7 +22,7 @@
 @use '../../unstable__bpk-mixins/utils';
 
 .bpk-accordion {
-  &__item {
+  &__item--with-divider {
     @include borders.bpk-border-bottom-sm(tokens.$bpk-line-day);
 
     &-on-dark {
@@ -89,6 +89,8 @@
   }
 
   &__content-inner-container {
-    padding-bottom: tokens.bpk-spacing-base();
+    &--with-divider {
+      padding-bottom: tokens.bpk-spacing-base();
+    }
   }
 }
diff --git a/packages/bpk-component-accordion/src/__snapshots__/BpkAccordionItem-test.js.snap b/packages/bpk-component-accordion/src/__snapshots__/BpkAccordionItem-test.js.snap
@@ -3,11 +3,11 @@
 exports[`BpkAccordionItem should not render an "initiallyExpanded" attribute on the html node 1`] = `
 <DocumentFragment>
   <div
-    class="bpk-accordion__item"
+    class="bpk-accordion__item bpk-accordion__item--with-divider"
     id="my-accordion"
   >
     <div
-      class="bpk-accordion__title bpk-accordion__title--collapsed"
+      class="bpk-accordion__title"
     >
       <button
         aria-controls="my-accordion_content"
@@ -60,7 +60,7 @@ exports[`BpkAccordionItem should not render an "initiallyExpanded" attribute on
           style="display: none;"
         >
           <div
-            class="bpk-accordion__content-inner-container"
+            class="bpk-accordion__content-inner-container bpk-accordion__content-inner-container--with-divider"
           >
             My accordion content
           </div>
@@ -74,11 +74,11 @@ exports[`BpkAccordionItem should not render an "initiallyExpanded" attribute on
 exports[`BpkAccordionItem should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="bpk-accordion__item"
+    class="bpk-accordion__item bpk-accordion__item--with-divider"
     id="my-accordion"
   >
     <div
-      class="bpk-accordion__title bpk-accordion__title--collapsed"
+      class="bpk-accordion__title"
     >
       <button
         aria-controls="my-accordion_content"
@@ -131,7 +131,7 @@ exports[`BpkAccordionItem should render correctly 1`] = `
           style="display: none;"
         >
           <div
-            class="bpk-accordion__content-inner-container"
+            class="bpk-accordion__content-inner-container bpk-accordion__content-inner-container--with-divider"
           >
             My accordion content
           </div>
@@ -149,7 +149,7 @@ exports[`BpkAccordionItem should render correctly with "className" prop 1`] = `
     id="my-accordion"
   >
     <div
-      class="bpk-accordion__title bpk-accordion__title--collapsed"
+      class="bpk-accordion__title"
     >
       <button
         aria-controls="my-accordion_content"
@@ -202,7 +202,7 @@ exports[`BpkAccordionItem should render correctly with "className" prop 1`] = `
           style="display: none;"
         >
           <div
-            class="bpk-accordion__content-inner-container"
+            class="bpk-accordion__content-inner-container bpk-accordion__content-inner-container--with-divider"
           >
             My accordion content
           </div>
@@ -216,7 +216,7 @@ exports[`BpkAccordionItem should render correctly with "className" prop 1`] = `
 exports[`BpkAccordionItem should render correctly with "expanded" prop 1`] = `
 <DocumentFragment>
   <div
-    class="bpk-accordion__item"
+    class="bpk-accordion__item bpk-accordion__item--with-divider"
     id="my-accordion"
   >
     <div
@@ -263,15 +263,15 @@ exports[`BpkAccordionItem should render correctly with "expanded" prop 1`] = `
       </button>
     </div>
     <div
-      class="bpk-accordion__content-container bpk-accordion__content-container--expanded"
+      class="bpk-accordion__content-container"
       id="my-accordion_content"
     >
       <div
         style="height: auto; overflow: visible; transition: height 200ms ease;"
       >
         <div>
           <div
-            class="bpk-accordion__content-inner-container"
+            class="bpk-accordion__content-inner-container bpk-accordion__content-inner-container--with-divider"
           >
             My accordion content
           </div>
@@ -285,11 +285,11 @@ exports[`BpkAccordionItem should render correctly with "expanded" prop 1`] = `
 exports[`BpkAccordionItem should render correctly with "tagName" prop set 1`] = `
 <DocumentFragment>
   <div
-    class="bpk-accordion__item"
+    class="bpk-accordion__item bpk-accordion__item--with-divider"
     id="my-accordion"
   >
     <div
-      class="bpk-accordion__title bpk-accordion__title--collapsed"
+      class="bpk-accordion__title"
     >
       <button
         aria-controls="my-accordion_content"
@@ -342,7 +342,7 @@ exports[`BpkAccordionItem should render correctly with "tagName" prop set 1`] =
           style="display: none;"
         >
           <div
-            class="bpk-accordion__content-inner-container"
+            class="bpk-accordion__content-inner-container bpk-accordion__content-inner-container--with-divider"
           >
             My accordion content
           </div>
@@ -356,11 +356,11 @@ exports[`BpkAccordionItem should render correctly with "tagName" prop set 1`] =
 exports[`BpkAccordionItem should render correctly with "textStyle" prop set 1`] = `
 <DocumentFragment>
   <div
-    class="bpk-accordion__item"
+    class="bpk-accordion__item bpk-accordion__item--with-divider"
     id="my-accordion"
   >
     <div
-      class="bpk-accordion__title bpk-accordion__title--collapsed"
+      class="bpk-accordion__title"
     >
       <button
         aria-controls="my-accordion_content"
@@ -413,7 +413,7 @@ exports[`BpkAccordionItem should render correctly with "textStyle" prop set 1`]
           style="display: none;"
         >
           <div
-            class="bpk-accordion__content-inner-container"
+            class="bpk-accordion__content-inner-container bpk-accordion__content-inner-container--with-divider"
           >
             My accordion content
           </div>
@@ -427,11 +427,11 @@ exports[`BpkAccordionItem should render correctly with "textStyle" prop set 1`]
 exports[`BpkAccordionItem should render correctly with an icon set 1`] = `
 <DocumentFragment>
   <div
-    class="bpk-accordion__item"
+    class="bpk-accordion__item bpk-accordion__item--with-divider"
     id="my-accordion"
   >
     <div
-      class="bpk-accordion__title bpk-accordion__title--collapsed"
+      class="bpk-accordion__title"
     >
       <button
         aria-controls="my-accordion_content"
@@ -496,7 +496,7 @@ exports[`BpkAccordionItem should render correctly with an icon set 1`] = `
           style="display: none;"
         >
           <div
-            class="bpk-accordion__content-inner-container"
+            class="bpk-accordion__content-inner-container bpk-accordion__content-inner-container--with-divider"
           >
             My accordion content
           </div>
@@ -510,7 +510,7 @@ exports[`BpkAccordionItem should render correctly with an icon set 1`] = `
 exports[`BpkAccordionItem should render correctly with no divider 1`] = `
 <DocumentFragment>
   <div
-    class="bpk-accordion__item"
+    class="bpk-accordion__item bpk-accordion__item--on-dark"
     id="my-accordion"
   >
     <div
@@ -582,11 +582,11 @@ exports[`BpkAccordionItem should render correctly with no divider 1`] = `
 exports[`BpkAccordionItem should render correctly with onDark set 1`] = `
 <DocumentFragment>
   <div
-    class="bpk-accordion__item"
+    class="bpk-accordion__item bpk-accordion__item--with-divider-on-dark bpk-accordion__item--on-dark"
     id="my-accordion"
   >
     <div
-      class="bpk-accordion__title bpk-accordion__title--collapsed-on-dark"
+      class="bpk-accordion__title"
     >
       <button
         aria-controls="my-accordion_content"
@@ -639,7 +639,7 @@ exports[`BpkAccordionItem should render correctly with onDark set 1`] = `
           style="display: none;"
         >
           <div
-            class="bpk-accordion__content-inner-container"
+            class="bpk-accordion__content-inner-container bpk-accordion__content-inner-container--with-divider"
           >
             My accordion content
           </div>