Update of TopGear FAQ

Now answers are sticky on desktop (stay within viewport when the page is
scrolled down), and the mobile rendering is corrected.

Author: birdofpreyru

__tests__/shared/components/tc-communities/AccordionItem.jsx

@@ -53,7 +53,7 @@ describe('Click on title', () => {
   test('onTitleClick', () => {
     const btn = TU.findAllInRenderedTree(page, item =>
       item && item.className && item.className.match(/accordion-title-button/));
-    expect(btn.length).toBe(1);
+    expect(btn.length).toBe(2);
     TU.Simulate.click(btn[0]);
     expect(mockOnTitleClick).toHaveBeenCalled();
   });

__tests__/shared/components/tc-communities/__snapshots__/Accordion.jsx.snap

@@ -7,6 +7,7 @@ exports[`Snapshot match 1`] = `
     Object {
       "container": "src-shared-components-tc-communities-Accordion-Accordion-___style__container___2y_cC",
       "content": "src-shared-components-tc-communities-Accordion-Accordion-___style__content___39ka7",
+      "title": "src-shared-components-tc-communities-Accordion-Accordion-___style__title___2jqCR",
       "titleList": "src-shared-components-tc-communities-Accordion-Accordion-___style__titleList___1AJq5",
       "titleListItem": "src-shared-components-tc-communities-Accordion-Accordion-___style__titleListItem___3MrXc",
       "titleListItemSelected": "src-shared-components-tc-communities-Accordion-Accordion-___style__titleListItemSelected___2EAYn",

__tests__/shared/components/tc-communities/__snapshots__/AccordionItem.jsx.snap

@@ -8,6 +8,8 @@ exports[`Snapshot match 1`] = `
     Object {
       "containerOpen": "src-shared-components-tc-communities-Accordion-AccordionItem-___style__containerOpen___2_Z8e",
       "content": "src-shared-components-tc-communities-Accordion-AccordionItem-___style__content___1dpq2",
+      "desktop": "src-shared-components-tc-communities-Accordion-AccordionItem-___style__desktop___23r4A",
+      "mobile": "src-shared-components-tc-communities-Accordion-AccordionItem-___style__mobile___3e9mH",
       "title": "src-shared-components-tc-communities-Accordion-AccordionItem-___style__title___1l-ih",
       "titleArrow": "src-shared-components-tc-communities-Accordion-AccordionItem-___style__titleArrow___33JDq",
       "titleText": "src-shared-components-tc-communities-Accordion-AccordionItem-___style__titleText___1TU4v",
@@ -29,6 +31,8 @@ exports[`Snapshot match 2`] = `
     Object {
       "containerOpen": "src-shared-components-tc-communities-Accordion-AccordionItem-___style__containerOpen___2_Z8e",
       "content": "src-shared-components-tc-communities-Accordion-AccordionItem-___style__content___1dpq2",
+      "desktop": "src-shared-components-tc-communities-Accordion-AccordionItem-___style__desktop___23r4A",
+      "mobile": "src-shared-components-tc-communities-Accordion-AccordionItem-___style__mobile___3e9mH",
       "title": "src-shared-components-tc-communities-Accordion-AccordionItem-___style__title___1l-ih",
       "titleArrow": "src-shared-components-tc-communities-Accordion-AccordionItem-___style__titleArrow___33JDq",
       "titleText": "src-shared-components-tc-communities-Accordion-AccordionItem-___style__titleText___1TU4v",

src/shared/components/tc-communities/Accordion/Accordion/index.jsx

@@ -46,6 +46,7 @@ class Accordion extends Component {
               <div
                 onClick={() => this.selectItem(index)}
                 role="button"
+                styleName="title"
                 tabIndex={0}
               >{child.props.title}</div>
             </li>

src/shared/components/tc-communities/Accordion/Accordion/style.scss

@@ -70,3 +70,7 @@
     width: 100%;
   }
 }
+
+.title {
+  padding-right: 12px;
+}

src/shared/components/tc-communities/Accordion/AccordionItem/index.jsx

@@ -12,13 +12,14 @@ import React from 'react';
 import PT from 'prop-types';
 import { themr } from 'react-css-themr';
 import cn from 'classnames';
+import Sticky from 'react-stickynode';
 import IconTickDown from '../../../../../assets/images/tc-communities/tick_down_big.svg';
 import defaultStyle from './style.scss';
 
 function AccordionItem(props) {
   const { title, children, onTitleClick, isOpen, theme } = props;
 
-  return (
+  const content = (
     <div className={cn(theme.container, { [theme.containerOpen]: isOpen })}>
       <h3 className={theme.title}>
         <div
@@ -36,6 +37,13 @@ function AccordionItem(props) {
       </div>
     </div>
   );
+
+  return (
+    <div>
+      <Sticky styleName="desktop">{content}</Sticky>
+      <div styleName="mobile">{content}</div>
+    </div>
+  );
 }
 
 AccordionItem.defaultProps = {

src/shared/components/tc-communities/Accordion/AccordionItem/style.scss

@@ -1,13 +1,24 @@
 @import '~styles/tc-styles';
 
+.desktop {
+  @include xxs-to-xs {
+    display: none;
+  }
+}
+
+.mobile {
+  @include sm-to-lg {
+    display: none;
+  }
+}
+
 .title {
   border-bottom: 1px solid #d1d3d4;
   display: none;
   color: #a3a3ae;
   cursor: pointer;
-  height: 60px;
-  font: 600 15px/60px 'Open Sans';
-  padding: 0 16px;
+  font: 600 15px 'Open Sans';
+  padding: 12px 16px;
   position: relative;
 
   @include xxs-to-xs {

src/shared/components/tc-communities/communities/wipro/FAQ/index.jsx

@@ -75,7 +75,9 @@ export default function Learn() {
         <Section
           title="Frequently Asked Questions"
           theme={{
+            container: style.faqContainer,
             content: style.faqContent,
+            title: style.faqTitle,
           }}
         >
           <Accordion>

src/shared/components/tc-communities/communities/wipro/FAQ/style.scss

@@ -9,6 +9,14 @@
   padding-bottom: 60px;
 }
 
+.faqContainer {
+  padding-top: 0;
+}
+
+.faqTitle {
+  padding-top: 0;
+}
+
 .highlighted {
   background: #ffc;
 }