From 0cd5f39ad1dc5bf5c2a73d41a4fe87f36a8e6fd9 Mon Sep 17 00:00:00 2001
From: Aanand Prasad <aanand.prasad@gmail.com>
Date: Tue, 30 Jan 2018 15:23:24 +0000
Subject: [PATCH] feat(ui): convert Attachment to a styled component
---
packages/ui/package.json | 3 +-
packages/ui/src/atoms/Attachment.js | 43 ++++++++++++++++++---
packages/ui/src/atoms/Attachment.local.scss | 30 --------------
3 files changed, 39 insertions(+), 37 deletions(-)
delete mode 100644 packages/ui/src/atoms/Attachment.local.scss
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 153ea2b27..bb6a607fc 100644
--- a/packages/ui/package.json
+++ b/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",
diff --git a/packages/ui/src/atoms/Attachment.js b/packages/ui/src/atoms/Attachment.js
index 1d320ee2d..445adafd1 100644
--- a/packages/ui/src/atoms/Attachment.js
+++ b/packages/ui/src/atoms/Attachment.js
@@ -1,14 +1,45 @@
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
diff --git a/packages/ui/src/atoms/Attachment.local.scss b/packages/ui/src/atoms/Attachment.local.scss
deleted file mode 100644
index 832d23dd8..000000000
--- a/packages/ui/src/atoms/Attachment.local.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.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;
-}
--
GitLab