From ecb50ffb8254962debeaea21b4c3e6ee7dbd89b5 Mon Sep 17 00:00:00 2001
From: Aanand Prasad <aanand.prasad@gmail.com>
Date: Thu, 1 Feb 2018 11:13:22 +0000
Subject: [PATCH] feat(ui): convert AlignmentBoxWithLabel, AlignmentTool to
styled-comp
---
.../ui/src/molecules/AlignmentBoxWithLabel.js | 49 +++++++-----
.../AlignmentBoxWithLabel.local.scss | 23 ------
packages/ui/src/molecules/AlignmentTool.js | 21 ++++-
.../ui/src/molecules/AlignmentTool.local.scss | 12 ---
.../ui/test/AlignmentBoxWithLabel.test.js | 26 +++----
.../AlignmentBoxWithLabel.test.js.snap | 36 +++++++--
.../__snapshots__/AlignmentTool.test.js.snap | 76 ++++++++++++++++---
7 files changed, 153 insertions(+), 90 deletions(-)
delete mode 100644 packages/ui/src/molecules/AlignmentBoxWithLabel.local.scss
delete mode 100644 packages/ui/src/molecules/AlignmentTool.local.scss
diff --git a/packages/ui/src/molecules/AlignmentBoxWithLabel.js b/packages/ui/src/molecules/AlignmentBoxWithLabel.js
index 0692dbd3c..94be09374 100644
--- a/packages/ui/src/molecules/AlignmentBoxWithLabel.js
+++ b/packages/ui/src/molecules/AlignmentBoxWithLabel.js
@@ -1,9 +1,26 @@
-import classNames from 'classnames'
import PropTypes from 'prop-types'
import React from 'react'
+import styled from 'styled-components'
import AlignmentBox from '../atoms/AlignmentBox'
-import classes from './AlignmentBoxWithLabel.local.scss'
+
+const blue = '#0d78f2'
+
+const Root = styled.div`
+ align-items: center;
+ display: flex;
+ flex-direction: row;
+`
+
+const Label = styled.span`
+ color: ${blue};
+ font-family: var(--font-interface);
+ font-size: 16px;
+ font-style: italic;
+ margin-left: ${props => (props.positionRight ? '10px' : '0')};
+ margin-right: ${props => (props.positionRight ? '0' : '10px')};
+ order: ${props => (props.positionRight ? '2' : '0')};
+`
const AlignmentBoxWithLabel = ({
active,
@@ -12,23 +29,17 @@ const AlignmentBoxWithLabel = ({
labelText,
noBorder,
onClick,
-}) => {
- const styles = classNames(classes.root, {
- [classes.reverseOrder]: labelPositionRight,
- })
-
- return (
- <div className={styles}>
- <span className={classes.label}>{labelText}</span>
- <AlignmentBox
- active={active}
- id={id}
- noBorder={noBorder}
- onClick={onClick}
- />
- </div>
- )
-}
+}) => (
+ <Root>
+ <Label positionRight={labelPositionRight}>{labelText}</Label>
+ <AlignmentBox
+ active={active}
+ id={id}
+ noBorder={noBorder}
+ onClick={onClick}
+ />
+ </Root>
+)
AlignmentBoxWithLabel.propTypes = {
active: PropTypes.bool.isRequired,
diff --git a/packages/ui/src/molecules/AlignmentBoxWithLabel.local.scss b/packages/ui/src/molecules/AlignmentBoxWithLabel.local.scss
deleted file mode 100644
index fc6156c05..000000000
--- a/packages/ui/src/molecules/AlignmentBoxWithLabel.local.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-$blue: #0d78f2;
-
-.root {
- align-items: center;
- display: flex;
- flex-direction: row;
-
- .label {
- color: $blue;
- font-family: var(--font-interface);
- font-size: 16px;
- font-style: italic;
- margin-right: 10px;
- }
-
- &.reverseOrder {
- .label {
- margin-left: 10px;
- margin-right: 0;
- order: 2;
- }
- }
-}
diff --git a/packages/ui/src/molecules/AlignmentTool.js b/packages/ui/src/molecules/AlignmentTool.js
index 6706f83f7..8b4dc356f 100644
--- a/packages/ui/src/molecules/AlignmentTool.js
+++ b/packages/ui/src/molecules/AlignmentTool.js
@@ -1,8 +1,21 @@
import React from 'react'
import PropTypes from 'prop-types'
+import styled from 'styled-components'
import AlignmentBoxWithLabel from './AlignmentBoxWithLabel'
-import classes from './AlignmentTool.local.scss'
+
+const mainGrey = '#666'
+
+const Root = styled.div`
+ display: flex;
+ margin-left: auto;
+`
+
+const MiddleLine = styled.div`
+ background-color: ${mainGrey};
+ height: 40px;
+ width: 1px;
+`
const AlignmentTool = ({ data, onClickAlignmentBox }) => {
const onClick = event => {
@@ -17,7 +30,7 @@ const AlignmentTool = ({ data, onClickAlignmentBox }) => {
const noBorderLeft = { left: true }
return (
- <div className={classes.root}>
+ <Root>
<AlignmentBoxWithLabel
active={leftData.active}
id={leftData.id}
@@ -26,7 +39,7 @@ const AlignmentTool = ({ data, onClickAlignmentBox }) => {
onClick={onClick}
/>
- <div className={classes.middleLine} />
+ <MiddleLine />
<AlignmentBoxWithLabel
active={rightData.active}
@@ -36,7 +49,7 @@ const AlignmentTool = ({ data, onClickAlignmentBox }) => {
noBorder={noBorderLeft}
onClick={onClick}
/>
- </div>
+ </Root>
)
}
diff --git a/packages/ui/src/molecules/AlignmentTool.local.scss b/packages/ui/src/molecules/AlignmentTool.local.scss
deleted file mode 100644
index d75e585b4..000000000
--- a/packages/ui/src/molecules/AlignmentTool.local.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-$main-grey: #666;
-
-.root {
- display: flex;
- margin-left: auto;
-
- .middleLine {
- background-color: $main-grey;
- height: 40px;
- width: 1px;
- }
-}
diff --git a/packages/ui/test/AlignmentBoxWithLabel.test.js b/packages/ui/test/AlignmentBoxWithLabel.test.js
index 8bb6ed97f..2edb5eec3 100644
--- a/packages/ui/test/AlignmentBoxWithLabel.test.js
+++ b/packages/ui/test/AlignmentBoxWithLabel.test.js
@@ -1,18 +1,11 @@
import React from 'react'
-import { shallow, mount, render } from 'enzyme'
+import { shallow, mount } from 'enzyme'
import renderer from 'react-test-renderer'
import 'jest-styled-components'
import AlignmentBox from '../src/atoms/AlignmentBox'
import AlignmentBoxWithLabel from '../src/molecules/AlignmentBoxWithLabel'
-const props = {
- active: true,
- id: 'left',
- labelPositionRight: true,
- labelText: 'Left',
-}
-
const requiredProps = {
active: false,
id: 'left',
@@ -21,7 +14,6 @@ const requiredProps = {
const wrapper = shallow(<AlignmentBoxWithLabel {...requiredProps} />)
const wrapperMounted = mount(<AlignmentBoxWithLabel {...requiredProps} />)
-const wrapperRendered = render(<AlignmentBoxWithLabel {...requiredProps} />)
describe('AlignmentBoxWithLabel', () => {
test('is rendered correctly', () => {
@@ -51,13 +43,17 @@ describe('AlignmentBoxWithLabel', () => {
})
test(`with default props the label is rendered on the left`, () => {
- expect(wrapper.is('.reverseOrder')).toBe(false)
- expect(wrapperRendered.text()).toEqual(requiredProps.labelText)
+ const label = wrapperMounted.find('span')
+ expect(label.text()).toEqual(requiredProps.labelText)
+ expect(label).toHaveStyleRule('order', '0')
})
- test('with given props has the correct classes', () => {
- const newWrapper = shallow(<AlignmentBoxWithLabel {...props} />)
-
- expect(newWrapper.is('.reverseOrder')).toBe(true)
+ test('with labelPositionRight={true}, the label is rendered on the right', () => {
+ const newWrapper = mount(
+ <AlignmentBoxWithLabel labelPositionRight {...requiredProps} />,
+ )
+ const label = newWrapper.find('span')
+ expect(label.text()).toEqual(requiredProps.labelText)
+ expect(label).toHaveStyleRule('order', '2')
})
})
diff --git a/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap b/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap
index 1e7b29b67..b56feb42c 100644
--- a/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap
+++ b/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AlignmentBoxWithLabel is rendered correctly 1`] = `
-.c0 {
+.c2 {
box-shadow: inset 0 0 0 2px rgba(255,255,255,1);
cursor: pointer;
height: 26px;
@@ -15,20 +15,46 @@ exports[`AlignmentBoxWithLabel is rendered correctly 1`] = `
background-color: transparent;
}
-.c0:hover {
+.c2:hover {
background-color: #b3b3b3;
}
+.c0 {
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+
+.c1 {
+ color: #0d78f2;
+ font-family: var(--font-interface);
+ font-size: 16px;
+ font-style: italic;
+ margin-left: 0;
+ margin-right: 10px;
+ -webkit-order: 0;
+ -ms-flex-order: 0;
+ order: 0;
+}
+
<div
- className="root"
+ className="c0"
>
<span
- className="label"
+ className="c1"
>
Left
</span>
<div
- className="c0"
+ className="c2"
id="left"
onClick={[Function]}
role="presentation"
diff --git a/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap b/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap
index 970c0864a..b57e9903b 100644
--- a/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap
+++ b/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap
@@ -1,7 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AlignmentTool is rendered correctly 1`] = `
-.c0 {
+.c3 {
box-shadow: inset 0 0 0 2px rgba(255,255,255,1);
cursor: pointer;
height: 26px;
@@ -15,11 +15,11 @@ exports[`AlignmentTool is rendered correctly 1`] = `
background-color: transparent;
}
-.c0:hover {
+.c3:hover {
background-color: #b3b3b3;
}
-.c1 {
+.c6 {
box-shadow: inset 0 0 0 2px rgba(255,255,255,1);
cursor: pointer;
height: 26px;
@@ -33,41 +33,93 @@ exports[`AlignmentTool is rendered correctly 1`] = `
background-color: transparent;
}
-.c1:hover {
+.c6:hover {
background-color: #b3b3b3;
}
+.c1 {
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: row;
+ -ms-flex-direction: row;
+ flex-direction: row;
+}
+
+.c2 {
+ color: #0d78f2;
+ font-family: var(--font-interface);
+ font-size: 16px;
+ font-style: italic;
+ margin-left: 0;
+ margin-right: 10px;
+ -webkit-order: 0;
+ -ms-flex-order: 0;
+ order: 0;
+}
+
+.c5 {
+ color: #0d78f2;
+ font-family: var(--font-interface);
+ font-size: 16px;
+ font-style: italic;
+ margin-left: 10px;
+ margin-right: 0;
+ -webkit-order: 2;
+ -ms-flex-order: 2;
+ order: 2;
+}
+
+.c0 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ margin-left: auto;
+}
+
+.c4 {
+ background-color: #666;
+ height: 40px;
+ width: 1px;
+}
+
<div
- className="root"
+ className="c0"
>
<div
- className="root"
+ className="c1"
>
<span
- className="label"
+ className="c2"
>
Left
</span>
<div
- className="c0"
+ className="c3"
id="left"
onClick={[Function]}
role="presentation"
/>
</div>
<div
- className="middleLine"
+ className="c4"
/>
<div
- className="root reverseOrder"
+ className="c1"
>
<span
- className="label"
+ className="c5"
>
right
</span>
<div
- className="c1"
+ className="c6"
id="right"
onClick={[Function]}
role="presentation"
--
GitLab