From 45986b981387b56a01345379c4b30013ca2ad965 Mon Sep 17 00:00:00 2001
From: Alexandru Munteanu <alexandru.munt@gmail.com>
Date: Wed, 15 Aug 2018 11:13:08 +0300
Subject: [PATCH] feat(styleguide): override accordion component

---
 .../component-faraday-ui/src/AuthorTagList.js |  7 +++++-
 packages/component-faraday-ui/src/Text.js     |  4 +---
 packages/hindawi-theme/package-lock.json      |  8 +++----
 .../hindawi-theme/src/elements/Accordion.js   | 24 +++++++++++++++++++
 packages/hindawi-theme/src/elements/index.js  | 12 +++++++++-
 packages/hindawi-theme/src/index.js           |  9 +++++++
 6 files changed, 55 insertions(+), 9 deletions(-)
 create mode 100644 packages/hindawi-theme/src/elements/Accordion.js

diff --git a/packages/component-faraday-ui/src/AuthorTagList.js b/packages/component-faraday-ui/src/AuthorTagList.js
index 4c65fb7cf..283000b2e 100644
--- a/packages/component-faraday-ui/src/AuthorTagList.js
+++ b/packages/component-faraday-ui/src/AuthorTagList.js
@@ -8,7 +8,12 @@ const AuthorTagList = ({ authors, authorKey = 'email', separator = ',' }) => (
   <Root>
     {authors
       .map(a => <AuthorTag author={a} key={a[authorKey]} />)
-      .reduce((prev, curr) => [prev, separator, <span>&nbsp;</span>, curr])}
+      .reduce((prev, curr) => [
+        prev,
+        separator,
+        <span key={curr}>&nbsp;</span>,
+        curr,
+      ])}
   </Root>
 )
 
diff --git a/packages/component-faraday-ui/src/Text.js b/packages/component-faraday-ui/src/Text.js
index ef6dc62e4..a512f96ff 100644
--- a/packages/component-faraday-ui/src/Text.js
+++ b/packages/component-faraday-ui/src/Text.js
@@ -28,9 +28,7 @@ const fontSize = css`
     props.small ? th('lineHeightBaseSmall') : th('lineHeightBase')};
 `
 
-const Text = styled.span`
+export default styled.span`
   ${fontSize};
   ${textHelper};
 `
-
-export default Text
diff --git a/packages/hindawi-theme/package-lock.json b/packages/hindawi-theme/package-lock.json
index 17b17800e..a5c791ad4 100644
--- a/packages/hindawi-theme/package-lock.json
+++ b/packages/hindawi-theme/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "hindawi-theme",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -226,9 +226,9 @@
       }
     },
     "styled-components": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-3.4.1.tgz",
-      "integrity": "sha512-MvQuniHicAzeugj5A5c+cwTseVb9fGEvKesyIRNmJtv/rfgMt5PvMJBMU9ChHne7e7nZ4MIm6QFDT4QBNujVgg==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-3.4.2.tgz",
+      "integrity": "sha512-eTmIiWstyDLccHZAyp+aCPirlkTvYiHlYGgWQxOYDv8Ko0o6mfnDo0+DnUnKinO8NzAfQXEDP7Bh0qlazwJgrw==",
       "requires": {
         "buffer": "^5.0.3",
         "css-to-react-native": "^2.0.3",
diff --git a/packages/hindawi-theme/src/elements/Accordion.js b/packages/hindawi-theme/src/elements/Accordion.js
new file mode 100644
index 000000000..8668a2387
--- /dev/null
+++ b/packages/hindawi-theme/src/elements/Accordion.js
@@ -0,0 +1,24 @@
+import { css } from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+export default {
+  Root: css`
+    background-color: ${th('accordion.backgroundColor')};
+    border-radius: ${th('borderRadius')};
+    box-shadow: ${th('boxShadow')};
+  `,
+  Header: {
+    Root: css`
+      border-bottom: ${props =>
+        props.expanded ? th('accordion.border') : 'none'};
+    `,
+    Label: css`
+      color: ${th('colorText')};
+      font-size: ${th('accordion.headerFontSize')};
+      font-family: ${th('accordion.headerFontFamily')};
+    `,
+    Icon: css`
+      color: ${th('colorText')};
+    `,
+  },
+}
diff --git a/packages/hindawi-theme/src/elements/index.js b/packages/hindawi-theme/src/elements/index.js
index 05d4a577f..61399916a 100644
--- a/packages/hindawi-theme/src/elements/index.js
+++ b/packages/hindawi-theme/src/elements/index.js
@@ -3,7 +3,17 @@ import Menu from './Menu'
 import Button from './Button'
 import Heading from './Heading'
 import Checkbox from './Checkbox'
+import Accordion from './Accordion'
 import TextField from './TextField'
 import ValidatedTextField from './ValidatedTextField'
 
-export { Icon, Menu, Checkbox, Heading, Button, TextField, ValidatedTextField }
+export {
+  Icon,
+  Menu,
+  Button,
+  Heading,
+  Checkbox,
+  Accordion,
+  TextField,
+  ValidatedTextField,
+}
diff --git a/packages/hindawi-theme/src/index.js b/packages/hindawi-theme/src/index.js
index e3e98ed82..3b3bd5ac5 100644
--- a/packages/hindawi-theme/src/index.js
+++ b/packages/hindawi-theme/src/index.js
@@ -9,6 +9,7 @@ import {
   Heading,
   Checkbox,
   TextField,
+  Accordion,
   ValidatedTextField,
 } from './elements'
 
@@ -37,6 +38,13 @@ const hindawiTheme = {
   colorTextPlaceholder: '#595959',
   colorWarning: '#FC6A4B',
 
+  accordion: {
+    backgroundColor: '#ffffff',
+    headerFontSize: '16px',
+    headerFontFamily: "'Myriad Pro'",
+    border: '1px solid #dbdbdb',
+  },
+
   heading: {
     h1Color: '#589eb8',
     h2Color: '#007e92',
@@ -150,6 +158,7 @@ const hindawiTheme = {
         Menu,
         Button,
         Checkbox,
+        Accordion,
         TextField,
         ValidatedTextField,
       },
-- 
GitLab