Use css modules in components (#241)

components/accordion/accordion.scss → components/accordion/accordion.module.scss

@@ -1,4 +1,4 @@
-@import "../bootstrap/core";
+@import "components/bootstrap/core";
 
 $chevron-icon: url("../icons/chevron-top.svg");
 $accordion-title-size: $font-size-lg !default;

components/accordion/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import { bind } from 'decko'
 
 import AccordionItem from './item'
-
+import styles from './accordion.module.scss'
 // TODO: Make it semantic: provide aria-* attributes
 class Accordion extends Component {
   state = {
@@ -60,7 +60,7 @@ class Accordion extends Component {
       })
     )
 
-    return <Tag className={`accordion ${className}`}>{items}</Tag>
+    return <Tag className={`${styles.accordion} ${className}`}>{items}</Tag>
   }
 }
 

components/accordion/item.jsx

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types'
 import { Card, CardHeader, CardBody, CardLink, Collapse } from 'reactstrap'
 import { bind } from 'decko'
 
+import styles from './accordion.module.scss'
+
 class AccordionItem extends Component {
   @bind
   toggle(event) {
@@ -16,22 +18,26 @@ class AccordionItem extends Component {
     return (
       <Card
         id={id}
-        className={`accordion-item ${isOpen ? 'active' : ''} ${className}`}
+        className={`${styles.accordionItem} ${styles.card} ${
+          isOpen ? styles.active : ''
+        } ${className}`}
         tag="section"
       >
-        <CardHeader className="accordion-header">
-          <h4 className="accordion-title">
+        <CardHeader
+          className={`${styles.accordionHeader} ${styles.cardHeader}`}
+        >
+          <h4 className={styles.accordionTitle}>
             <CardLink
               href={`#${id}`}
-              className="accordion-link"
+              className={styles.accordionLink}
               onClick={this.toggle}
             >
               {title}
             </CardLink>
           </h4>
         </CardHeader>
         <Collapse isOpen={isOpen}>
-          <CardBody className="accordion-body">{children}</CardBody>
+          <CardBody className={styles.cardBody}>{children}</CardBody>
         </Collapse>
       </Card>
     )

components/blockquote/blockquote.scss → components/blockquote/blockquote.module.scss

@@ -1,4 +1,4 @@
-@import "../bootstrap/core";
+@import "components/bootstrap/core";
 
 $blockquote-avatar-size: 8rem !default;
 $blockquote-padding-left: 3.5 * $font-size-base !default;

components/blockquote/index.jsx

@@ -1,30 +1,32 @@
 import React, { Fragment } from 'react'
 
+import styles from './blockquote.module.scss'
+
 const BlockquoteFooter = ({
   children,
   className = '',
   tag: Tag = 'footer',
   ...restProps
 }) => (
-  <Tag className={`blockquote-footer ${className}`} {...restProps}>
+  <Tag className={`${styles.blockquoteFooter} ${className}`} {...restProps}>
     {children}
   </Tag>
 )
 
 const BlockquoteCite = ({ name, role, tag: Tag = BlockquoteFooter }) => (
   <Tag>
-    <cite className="blockquote-author-name">{name}</cite>
+    <cite>{name}</cite>
     {role && (
       <>
-        , <cite className="blockquote-author-role">{role}</cite>
+        , <cite>{role}</cite>
       </>
     )}
   </Tag>
 )
 
 const BlockquoteAvatar = ({ src, alt, ...restProps }) => (
   <img
-    className="blockquote-author-avatar"
+    className={styles.blockquoteAuthorAvatar}
     src={src}
     alt={alt}
     {...restProps}
@@ -52,7 +54,9 @@ const Blockquote = ({
   ...restProps
 }) => (
   <Tag
-    className={`blockquote ${avatar ? 'blockquote-avatar' : ''} ${className}`}
+    className={`${styles.blockquote} ${
+      avatar ? styles.blockquoteAvatar : ''
+    } ${className}`}
     {...restProps}
   >
     {children}

components/citation-tabs/citation-tabs.scss → components/citation-tabs/citation-tabs.module.scss

@@ -1,4 +1,4 @@
-@import "../bootstrap/core";
+@import "components/bootstrap/core";
 
 $citation-control-height: 8 * $spacer;
 

components/citation-tabs/tab.jsx

@@ -1,17 +1,19 @@
 import React from 'react'
 import { TabPane, FormGroup, Input } from 'reactstrap'
 
+import styles from './citation-tabs.module.scss'
+
 const CitationTab = ({ id, type, title, content, onRef, ...restProps }) => {
   const controlId = `${id}-control`
   return (
-    <TabPane className="citation-tab" {...restProps}>
-      <FormGroup key="citation-text" className="citation-tab-form-group">
+    <TabPane className={styles.citationTab} {...restProps}>
+      <FormGroup key="citation-text" className={styles.citationTabFormGroup}>
         <label className="sr-only" htmlFor={controlId}>
           {title} text to copy
         </label>
         <Input
           ref={onRef}
-          className="citation-tab-control"
+          className={styles.citationTabControl}
           type="textarea"
           value={content}
           id={controlId}

components/citation-tabs/text-loader.jsx

@@ -1,6 +1,8 @@
 import React, { Component } from 'react'
 import { Alert, Spinner, TabPane, FormGroup, Input } from 'reactstrap'
 
+import styles from './citation-tabs.module.scss'
+
 class CitationTextLoader extends Component {
   state = {
     isLoading: true,
@@ -68,24 +70,28 @@ class CitationTextLoader extends Component {
         <Spinner
           key="spinner"
           color="primary"
-          className="citation-tab-spinner"
+          className={styles.citationTabSpinner}
         />
       )
     } else if (errorText) {
       children = (
-        <Alert key="error-text" color="danger" className="citation-tab-error">
+        <Alert
+          key="error-text"
+          color="danger"
+          className={styles.citationTabError}
+        >
           {errorText}
         </Alert>
       )
     } else {
       const controlId = `${id}-citation-text-${type}`
       children = (
-        <FormGroup key="citation-text" className="citation-tab-form-group">
+        <FormGroup key="citation-text" className={styles.citationTabFormGroup}>
           <label className="sr-only" htmlFor={controlId}>
             {title} text to copy
           </label>
           <Input
-            className="citation-tab-control"
+            className={styles.citationTabControl}
             type="textarea"
             value={citationText}
             id={controlId}
@@ -96,7 +102,7 @@ class CitationTextLoader extends Component {
     }
 
     return (
-      <Tag className="citation-tab" {...restProps}>
+      <Tag className={styles.citationTab} {...restProps}>
         {children}
       </Tag>
     )

components/contact-form/contact-form.scss

@@ -1,4 +1,4 @@
-@import "../bootstrap/core";
+@import "components/bootstrap/core";
 
 .contact-form {
   background-color: $gray-100;

components/cookies/cookies.scss → components/cookies/cookies.module.scss

@@ -1,4 +1,4 @@
-@import "../bootstrap/core";
+@import "components/bootstrap/core";
 
 .cookies-form {
   background: $beige-dark;
@@ -9,9 +9,6 @@
   }
 }
 
-.cookies-form-title {
-}
-
 .cookies-form-details {
   margin-left: $custom-switch-width + $custom-control-gutter;
 

components/cookies/form.jsx

@@ -4,6 +4,7 @@ import { CustomInput, Form, FormGroup, Card, CardTitle } from 'reactstrap'
 import { Button } from '../elements'
 import ButtonToolbar from '../button-toolbar'
 import Markdown from '../markdown'
+import styles from './cookies.module.scss'
 
 const CookiesForm = ({
   title,
@@ -17,12 +18,12 @@ const CookiesForm = ({
   ...formProps
 }) => (
   <Card
-    className={`card-body cookies-form ${className}`}
+    className={`card-body ${styles.cookiesForm} ${className}`}
     method={method}
     tag={Form}
     {...formProps}
   >
-    <CardTitle className="cookies-form-title" tag="h4">
+    <CardTitle className={styles.cookiesFormTitle} tag="h4">
       {title}
     </CardTitle>
     {Object.entries(items).map(
@@ -39,7 +40,7 @@ const CookiesForm = ({
             defaultChecked={required ? defaultValue : value}
             disabled={required}
           />
-          <details className="cookies-form-details">
+          <details className={styles.cookiesFormDetails}>
             <summary>{itemDescriptionTitle}</summary>
             <Markdown>{description}</Markdown>
           </details>

components/cookies/popup.jsx

@@ -3,6 +3,7 @@ import { Form } from 'reactstrap'
 
 import { Button } from '../elements'
 import Markdown from '../markdown'
+import styles from './cookies.module.scss'
 
 const CookiesPopup = ({
   title = 'We use cookies',
@@ -11,12 +12,14 @@ const CookiesPopup = ({
   submitCaption = 'Accept',
   ...formProps
 }) => (
-  <Form className="cookies-popup" id="cookies-popup" {...formProps}>
-    <div className="cookies-popup-body">
-      <h4 className="cookies-popup-title">{title}</h4>
+  <Form className={styles.cookiesPopup} id="cookies-popup" {...formProps}>
+    <div className={styles.cookiesPopupBody}>
+      <h4 className={styles.cookiesPopupTitle}>{title}</h4>
       <Markdown>{body}</Markdown>
     </div>
-    <Button className="cookies-popup-button cookies-popup-button-accept">
+    <Button
+      className={`${styles.cookiesPopupButton} ${styles.cookiesPopupButtonAccept}`}
+    >
       <span className="sr-only">{submitCaption}</span>
     </Button>
   </Form>

components/footer/footer.scss → components/footer/footer.module.scss

@@ -1,4 +1,4 @@
-@import "../bootstrap/core";
+@import "components/bootstrap/core";
 
 $footer-partners-breakpoint: "sm";
 

components/footer/index.jsx

@@ -4,14 +4,15 @@ import { Container, Row, Col } from 'reactstrap'
 
 import Markdown from '../markdown'
 import Link from '../link'
+import styles from './footer.module.scss'
 
 const Footer = ({ usefulLinks, partners, researchOutputs, className = '' }) => (
-  <footer className={`footer ${className}`}>
+  <footer className={`${styles.footer} ${className}`}>
     <Container>
-      <Row className="footer-highlights">
+      <Row className={styles.footerHighlights}>
         <Col md={{ size: 6, offset: 1 }} tag="aside">
           <h4>Useful links</h4>
-          <ul className="footer-highlights-list">
+          <ul className={styles.footerHighlightsList}>
             {usefulLinks.map(({ title, path }) => (
               <li key={`${title} @ ${path}`}>
                 <Link href={path}>{title}</Link>
@@ -20,17 +21,17 @@ const Footer = ({ usefulLinks, partners, researchOutputs, className = '' }) => (
           </ul>
         </Col>
         <Col md="4">
-          <aside className="footer-cite-info">
+          <aside className={styles.footerCiteInfo}>
             <h6>Writing about CORE?</h6>
             <Markdown>{researchOutputs}</Markdown>
           </aside>
         </Col>
       </Row>
 
-      <div className="footer-partners">
+      <div className={styles.footerPartners}>
         <a
           id="footer-logo-ou"
-          className="footer-partners-item footer-partners-logo"
+          className={`${styles.footerPartnersItem} ${styles.footerPartnersLogo}`}
           href="https://www.open.ac.uk"
           target="_blank"
           rel="noopener noreferrer"
@@ -39,14 +40,16 @@ const Footer = ({ usefulLinks, partners, researchOutputs, className = '' }) => (
         </a>
         <a
           id="footer-logo-jisc"
-          className="footer-partners-item footer-partners-logo"
+          className={`${styles.footerPartnersItem} ${styles.footerPartnersLogo}`}
           href="https://www.jisc.ac.uk"
           target="_blank"
           rel="noopener noreferrer"
         >
           <img src="/images/logos/jisc.svg" alt="Jisc" />
         </a>
-        <Markdown className="footer-partners-item footer-partners-text">
+        <Markdown
+          className={`${styles.footerPartnersItem} ${styles.footerPartnersText}`}
+        >
           {partners}
         </Markdown>
       </div>

components/header/header.scss → components/header/header.module.scss

@@ -1,4 +1,4 @@
-@import "../bootstrap/core";
+@import "components/bootstrap/core";
 
 .header {
   box-shadow: 0 2px 4px rgba($black, 0.1), 0 4px 8px rgba($black, 0.05);

components/header/index.jsx

@@ -19,6 +19,7 @@ import Link from '../link'
 import Logo from '../logo'
 import SearchNavbar from '../search-navbar'
 import NavDropdown from '../nav-dropdown'
+import styles from './header.module.scss'
 
 class Header extends React.Component {
   state = {
@@ -139,7 +140,7 @@ class Header extends React.Component {
         light
         color="light"
         expand="md"
-        className={`header ${className}`}
+        className={`${styles.header} ${className}`}
         tag="header"
       >
         <Container>

components/hero/hero.scss → components/hero/hero.module.scss

@@ -1,4 +1,4 @@
-@import '../bootstrap/core';
+@import "components/bootstrap/core";
 
 .hero {
   padding-top: $article-spacer;

components/hero/index.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import Logo from '../logo'
 import { Section } from '../content'
+import styles from './hero.module.scss'
 
 const HeroSection = ({
   children,
@@ -11,9 +12,9 @@ const HeroSection = ({
   tag = 'div',
   ...restProps
 }) => (
-  <Section className={`hero ${className}`} tag={tag} {...restProps}>
-    <Logo text={title} className="hero-logo" tag="h1" />
-    {tagline && <p className="hero-tagline">{tagline}</p>}
+  <Section className={`${styles.hero} ${className}`} tag={tag} {...restProps}>
+    <Logo text={title} className={styles.heroLogo} tag="h1" />
+    {tagline && <p className={styles.heroTagline}>{tagline}</p>}
     {children}
   </Section>
 )