feat(styleguide): override accordion component

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>
 )
 

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

packages/hindawi-theme/package-lock.json

 {
   "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",

packages/hindawi-theme/src/elements/Accordion.js

+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')};
+    `,
+  },
+}

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,
+}

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,
       },