Merge pull request #1496 from cozy/app-sections-improvements

cozy · Jul 9, 2020 · 664c835 · 664c835
2 parents 9cb95bb + c3bd3e1
commit 664c835
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 23 deletions.
diff --git a/react/AppSections/Sections.jsx b/react/AppSections/Sections.jsx
@@ -78,7 +78,11 @@ export class Sections extends Component {
       onAppClick,
       breakpoints = {},
       hasNav,
-      IconComponent
+      IconComponent,
+      showFilterDropdown,
+      showTitles,
+      showSubTitles,
+      showSubSubTitles
     } = this.props
     const { isMobile, isTablet } = breakpoints
 
@@ -103,7 +107,8 @@ export class Sections extends Component {
       .map(cat => catUtils.addLabel({ value: cat }, t))
       .sort(catUtils.sorter)
 
-    const dropdownDisplayed = hasNav && (isMobile || isTablet)
+    const dropdownDisplayed =
+      hasNav && (isMobile || isTablet) && showFilterDropdown
     const rawSelectOptions = catUtils.generateOptionsFromApps(apps, {
       includeAll: true
     })
@@ -122,7 +127,7 @@ export class Sections extends Component {
             onChange={this.handleCategoryChange}
           />
         )}
-        {!isMobile && !!webAppsCategories.length && (
+        {!isMobile && !!webAppsCategories.length && showTitles && (
           <SectionTitle>{t('sections.applications')}</SectionTitle>
         )}
         <Section>
@@ -143,14 +148,18 @@ export class Sections extends Component {
           )}
           {!!konnectorsCategories.length && (
             <div>
-              <SectionSubtitle>{t('sections.konnectors')}</SectionSubtitle>
+              {showSubTitles && (
+                <SectionSubtitle>{t('sections.konnectors')}</SectionSubtitle>
+              )}
               {konnectorsCategories.map(cat => {
                 return (
                   <AppsSection
                     key={cat.value}
                     appsList={konnectorGroups[cat.value]}
                     subtitle={
-                      <SectionSubSubtitle>{cat.label}</SectionSubSubtitle>
+                      showSubSubTitles ? (
+                        <SectionSubSubtitle>{cat.label}</SectionSubSubtitle>
+                      ) : null
                     }
                     IconComponent={IconComponent}
                     onAppClick={onAppClick}
@@ -182,7 +191,18 @@ Sections.propTypes = {
 }
 
 Sections.defaultProps = {
-  hasNav: true
+  hasNav: true,
+  /** Whether to show the top dropdown that is used to switch categories on mobile */
+  showFilterDropdown: true,
+
+  /** Whether to show titles (ex: Applications) */
+  showTitles: true,
+
+  /** Whether to show sub titles (ex: Application category) */
+  showSubTitles: true,
+
+  /** Whether to show sub sub titles (ex: Konnector category) */
+  showSubSubTitles: true
 }
 
 export const Untranslated = withBreakpoints()(Sections)

diff --git a/react/AppSections/Sections.styl b/react/AppSections/Sections.styl
@@ -1,22 +1,13 @@
-.Sections 
-    margin 2rem .5rem 0 2rem
-    margin-left 1rem
-    margin-right 1rem
-
-.Sections__subtitle 
+.Sections__subtitle
     margin-top 1.5rem
     margin-bottom 1rem
 
-.Sections__subsubtitle 
+.Sections__subsubtitle
     font-size 13px
     color var(--coolGrey)
     text-transform uppercase
 
-.Sections__section 
+.Sections__section
     margin-bottom 4rem
 
-@media (max-width: 48rem) 
-  .Sections
-      margin-left  1rem
-      margin-right 1rem
 
diff --git a/react/AppSections/__snapshots__/index.spec.jsx.snap b/react/AppSections/__snapshots__/index.spec.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`AppsSection component should be rendered correctly with apps list, subtitle and onAppClick 1`] = `
 <div
-  className="Sections__Sections___2QzV_"
+  className=""
 >
   <SectionTitle>
     Applications
@@ -340,7 +340,7 @@ exports[`AppsSection component should be rendered correctly with apps list, subt
 
 exports[`AppsSection component should not render dropdown filter on mobile if nav=false flag provided 1`] = `
 <div
-  className="Sections__Sections___2QzV_"
+  className=""
 >
   <Section>
     <div>
@@ -675,7 +675,7 @@ exports[`AppsSection component should not render dropdown filter on mobile if na
 
 exports[`AppsSection component should not render dropdown filter on tablet if nav=false flag provided 1`] = `
 <div
-  className="Sections__Sections___2QzV_"
+  className=""
 >
   <SectionTitle>
     Applications
@@ -1021,7 +1021,7 @@ exports[`AppsSection component should render correctly render message if error p
 
 exports[`AppsSection component should render dropdown filter on mobile if no nav=false flag provided 1`] = `
 <div
-  className="Sections__Sections___2QzV_ u-mt-half"
+  className="u-mt-half"
 >
   <DropdownFilter
     defaultValue={
@@ -1416,7 +1416,7 @@ exports[`AppsSection component should render dropdown filter on mobile if no nav
 
 exports[`AppsSection component should render dropdown filter on tablet if no nav=false flag provided 1`] = `
 <div
-  className="Sections__Sections___2QzV_ u-mt-half"
+  className="u-mt-half"
 >
   <DropdownFilter
     defaultValue={