feat(ui): convert Attachment to a styled component

packages/ui/package.json

@@ -24,7 +24,8 @@
     "react-tag-autocomplete": "^5.4.1",
     "recompose": "^0.26.0",
     "redux": "^3.6.0",
-    "redux-form": "^7.0.3"
+    "redux-form": "^7.0.3",
+    "styled-components": "^3.1.4"
   },
   "devDependencies": {
     "@pubsweet/styleguide": "^1.0.0",

packages/ui/src/atoms/Attachment.js

 import React from 'react'
+import styled from 'styled-components'
 import Icon from './Icon'
-import classes from './Attachment.local.scss'
+
+const Filename = styled.span`
+  color: var(--color-primary);
+  display: inline-flex;
+  overflow-wrap: break-word;
+  padding: 0;
+  word-break: break-all;
+`
+
+const IconContainer = styled.span`
+  --color-local: var(--color-primary);
+  --icon-size: 16px;
+
+  margin: 0.5em;
+
+  & svg {
+    height: var(--icon-size);
+    width: var(--icon-size);
+  }
+`
+
+const Root = styled.a`
+  align-items: center;
+  display: flex;
+  line-height: 1.15;
+  text-decoration: none;
+
+  &:hover ${Filename} {
+    text-decoration: underline;
+  }
+`
 
 const Attachment = ({ value }) => (
-  <a className={classes.root} download={value.name} href={value.url}>
-    <span className={classes.icon}>
+  <Root download={value.name} href={value.url}>
+    <IconContainer>
       <Icon color="var(--color-local)">paperclip</Icon>
-    </span>
-    <span className={classes.filename}>{value.name}</span>
-  </a>
+    </IconContainer>
+    <Filename>{value.name}</Filename>
+  </Root>
 )
 
 export default Attachment

packages/ui/src/atoms/Attachment.local.scss

-.root {
-  align-items: center;
-  display: flex;
-  line-height: 1.15;
-  text-decoration: none;
-}
-
-.icon {
-  --color-local: var(--color-primary);
-  --icon-size: 16px;
-
-  margin: 0.5em;
-}
-
-.icon svg {
-  height: var(--icon-size);
-  width: var(--icon-size);
-}
-
-.filename {
-  color: var(--color-primary);
-  display: inline-flex;
-  overflow-wrap: break-word;
-  padding: 0;
-  word-break: break-all;
-}
-
-.root:hover .filename {
-  text-decoration: underline;
-}