Update endorsements section (#229)

1. Updated layout
2. Removed carousel
3. Added a toggle to show all quotes
4. Added illustrations to sections
5. Added navigation to the page

components/sections/endorsements.jsx

@@ -1,59 +1,173 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Row, Col } from 'reactstrap'
 
 import Markdown from '../markdown'
 import { Button } from '../elements'
-import { Section } from '../content'
-import LogosCarousel from '../logos-carousel'
-import TestimonialsCarousel from '../testimonials-carousel'
+import { Section, Content } from '../content'
+import Testimonial from '../testimonial'
+
+const filterOut = (what, from) => from.filter(item => !what.includes(item))
+const toTestimonial = organization => ({
+  ...organization.testimonial,
+  organization,
+})
+
+const Logo = ({ logo, name, url, className = '', ...restProps }) => (
+  <span
+    className={`testimonial-section-organizations-item ${className}`}
+    title={name}
+    {...restProps}
+  >
+    <img src={`/images/logos/${logo}`} alt={name} />
+  </span>
+)
+
+const Preview = ({ organizations }) => {
+  const quoted = organizations
+    .filter(({ testimonial }) => testimonial != null)
+    .slice(0, 1)
+  const rest = filterOut(quoted, organizations).slice(0, 6)
+  const [main] = quoted.map(toTestimonial)
+
+  return (
+    <>
+      <Testimonial key={main.id} className="card card-body" avatar {...main} />
+
+      <Row className="testimonial-section-organizations">
+        {rest.map(org => (
+          <Col xs="6" sm="4" lg="2">
+            <Logo key={org.id} {...org} />
+          </Col>
+        ))}
+      </Row>
+    </>
+  )
+}
+
+const List = ({ organizations }) => {
+  const quoted = organizations.filter(({ testimonial }) => testimonial != null)
+  const rest = filterOut(quoted, organizations)
+
+  return (
+    <>
+      {quoted.map(organization => {
+        const testimonial = toTestimonial(organization)
+        return (
+          <Testimonial
+            key={testimonial.id}
+            className="card card-body"
+            avatar
+            {...testimonial}
+          />
+        )
+      })}
+
+      <div className="testimonial-section-organizations">
+        {rest.map(org => (
+          <Col xs="6" sm="4" lg="2">
+            <Logo key={org.id} {...org} />
+          </Col>
+        ))}
+      </div>
+    </>
+  )
+}
 
 const TestimonialsSection = ({
   title,
-  items,
+  items: organizations,
   level = 2,
   className = '',
   ...restProps
 }) => {
+  // This is a workaround to preserve the correct scroll position when
+  // the user clicks on the button.
+  //
+  // The `iteration` is passed as a key to the toggle-button. If the key does
+  // not differ, React does not create new element and the browser keeps
+  // the item in the same place. If the key differs, React removes the element
+  // and creates a new one, so the button looses focus.
+  //
+  // We preserve the element if the user collapses the list, so the browser
+  // scrolls the page up with the button. If the user expands the list,
+  // we change the key so we 'remove' the button and the page expands
+  // to the bottom.
+  const [iteration, setIteration] = useState(0)
+  const expanded = Boolean(iteration % 2)
+
+  const toggle = () => {
+    setIteration(iteration + 1)
+  }
+
   const Heading = `h${level}`
+
   return (
     <Section className={`testimonials-section ${className}`} {...restProps}>
       <Heading>{title}</Heading>
-      <TestimonialsCarousel items={items} ride={false} />
+      {!expanded ? (
+        <>
+          <Preview organizations={organizations} />
+          <p className="mb-0">
+            <Button key={iteration} outline onClick={toggle}>
+              Show all
+            </Button>
+          </p>
+        </>
+      ) : (
+        <>
+          <List organizations={organizations} />
+          <p className="mb-0">
+            <Button key={iteration + 1} outline onClick={toggle}>
+              Collapse
+            </Button>
+          </p>
+        </>
+      )}
     </Section>
   )
 }
 
 const EndorsementsSection = ({
   id,
   title,
+  illustration,
   description,
+  subtitle,
   action,
   organizations,
-  testimonials,
   level = 2,
   ...restProps
 }) => {
   const Heading = `h${level}`
+
   return (
     <Section id={id} {...restProps}>
       <Heading>{title}</Heading>
-
       <Row>
-        <Col sm="9">
-          <Markdown>{description}</Markdown>
-          <p className="font-weight-bold">{action.title}</p>
-          <Button color="primary" href={action.url}>
-            {action.name}
-          </Button>
+        <Col md="4" className="testimonial-section-illustration-container">
+          {illustration && (
+            <img
+              className="testimonial-section-illustration"
+              src={`/images/illustrations/${illustration}`}
+              alt=""
+              aria-hidden
+            />
+          )}
         </Col>
-        <Col sm="3">
-          <LogosCarousel items={organizations} ride={false} />
+        <Col md="8">
+          <Content>
+            <Markdown>{description}</Markdown>
+            <p className="font-weight-bold">{action.title}</p>
+            <Button color="primary" href={action.url}>
+              {action.name}
+            </Button>
+          </Content>
         </Col>
       </Row>
 
       <TestimonialsSection
-        title={testimonials.title}
-        items={testimonials.items}
+        title={subtitle}
+        items={organizations}
         level={level + 1}
       />
     </Section>

components/sections/endorsements.scss

@@ -1,5 +1,48 @@
-@import "../bootstrap/core";
+@import '../bootstrap/core';
 
 .testimonials-section {
-  @include section-skew-left($blue-light);
+  @include section-skew-left($gray-200);
+
+  .testimonial + .testimonial {
+    margin-top: $spacer;
+  }
+}
+
+.testimonial-section-illustration {
+  display: block;
+  width: 100%;
+  height: auto;
+  margin: 0 0 $spacer;
+}
+
+.testimonial-section-illustration-container {
+  @include media-breakpoint-up('md') {
+    order: 1;
+  }
+}
+
+.testimonial-section-organizations {
+  @include make-row();
+}
+
+.testimonial-section-organizations-item {
+  position: relative;
+  display: block;
+  height: 0;
+  padding: 0 0 percentage(0.5);
+  margin-bottom: $spacer;
+  background: $white;
+  border: $card-border-width solid $card-border-color;
+  @include border-radius($card-border-radius);
+
+  img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    padding: $card-spacer-y $card-spacer-x;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
 }

data/endorsements.yml

@@ -632,7 +632,9 @@ organizations:
 sections:
   enterprise-companies:
     id: enterprise-companies
-    title: Companies using CORE
+    title: Enterprise companies using CORE
+    illustration: business-plan.svg
+    caption: Enterprise companies
     description: |
       [CORE data services](~services) power innovative applications delivered
       by independent businesses, many of which utilise cutting edge artificial
@@ -668,7 +670,9 @@ sections:
         - *claus-wolf
   academic-institutions:
     id: academic-institutions
-    title: Institutions using CORE
+    title: Academic institutions using CORE
+    caption: Academic institutions
+    illustration: bibliophile.svg
     description: |
       Institutions use CORE in a variety of cases, for example to [discover open access
       content](~services/discovery), [manage their repository content](~services/discovery) in CORE and offer [recommendations](~services/recommender) of
@@ -725,6 +729,8 @@ sections:
   partners:
     id: partner-projects
     title: Partner projects
+    caption: Partner projects
+    illustration: live-collaboration.svg
     description: |
       CORE has created exciting partnerships with open access infrastructure and
       innovative open science projects. With these collaborations CORE has been extending

pages/about/endorsements.jsx

@@ -16,21 +16,16 @@ const extractTestimonials = organizations =>
     }))
 
 const EndorsementsPage = () => (
-  <Page title={title} description={description} keywords={keywords}>
+  <Page title={title} description={description} keywords={keywords} nav>
     <h1>{title}</h1>
 
     {Object.entries(sections).map(
-      ([key, { testimonials, organizations, ...section }]) => (
+      ([key, { testimonials, organizations, caption, ...section }]) => (
         <EndorsementsSection
           key={key}
           organizations={organizations.items}
-          testimonials={{
-            title: testimonials.title,
-            items: [
-              ...extractTestimonials(organizations.items),
-              ...(testimonials.items || []),
-            ],
-          }}
+          subtitle={testimonials.title}
+          caption={caption}
           {...section}
         />
       )