Commit 9dc80bcd authored by chris's avatar chris

aligment box with label

parent 787c2aa7
import classNames from 'classnames'
import PropTypes from 'prop-types'
import React from 'react'
import classes from './AlignmentBoxWithLabel.local.scss'
import AlignmentBox from './AlignmentBox'
const AlignmentBoxWithLabel = ({ active, id, noBorder,
onClick, labelPositionRight, labelText }) => {
const styles = classNames(
classes.alignmentBoxWithLabel,
{
[classes.reverseOrder]: labelPositionRight
}
)
return (
<div className={styles}>
<span className={classes.label}>
{labelText}
</span>
<AlignmentBox
active={active}
noBorder={noBorder}
id={id}
onClick={onClick}
/>
</div>
)
}
AlignmentBoxWithLabel.propTypes = {
active: PropTypes.bool.isRequired,
id: PropTypes.string.isRequired,
labelPositionRight: PropTypes.bool,
noBorder: PropTypes.shape({
top: PropTypes.bool,
bottom: PropTypes.bool,
right: PropTypes.bool,
left: PropTypes.bool
}),
onClick: PropTypes.func,
labelText: PropTypes.string.isRequired
}
AlignmentBoxWithLabel.defaultProps = {
active: false,
labelPositionRight: false,
noBorder: {
top: false,
bottom: false,
right: false,
left: false
},
onClick: () => null,
reverse: false
}
export default AlignmentBoxWithLabel
$blue: #0d78f2;
.alignmentBoxWithLabel {
align-items: center;
display: flex;
flex-direction: row;
.label {
color: $blue;
font-family: 'Fira Sans Condensed';
font-size: 16px;
font-style: italic;
margin-right: 10px;
}
&.reverseOrder {
flex-direction: row-reverse;
justify-content: flex-start;
.label {
margin-left: 10px;
}
}
}
AligmentBox with Label on the left
```js
const active = true;
const id = 'eyedee';
const noBorder = {};
const onClick = () => { return null };
const labelText = 'left';
<AlignmentBoxWithLabel
active={active}
noBorder={noBorder}
id = {id}
onClick={onClick}
labelText={labelText}
/>
```
Inactive AligmentBox with Label on the right
```js
const active = false;
const id = 'eyedee';
const noBorder = {};
const onClick = () => { return null };
const labelPositionRight = true;
const labelText = 'right';
<AlignmentBoxWithLabel
active={active}
noBorder={noBorder}
id = {id}
onClick={onClick}
labelPositionRight={labelPositionRight}
labelText={labelText}
/>
```
......@@ -512,61 +512,61 @@ $upload-multiple: #b1b1b1;
transition: .25s ease-in-out 0s;
}
}
.pagePosition {
float: right;
position: relative;
top: 4px;
li {
color: $blue;
float: left;
font-family: 'Fira Sans Condensed';
font-size: 16px;
font-style: italic;
}
// .leftRightBox {
// border: 1px solid $main-grey;
// float: left;
// height: 26px;
// padding: 2px 0 0 1.8px;
// text-align: center;
// width: 17.5px;
// }
// .leftBox {
// border-right: 0;
// }
// .rightBox {
// border-left: 0;
// }
.boxDiver {
border-right: 1px solid $dark-grey;
bottom: 5px;
height: 35px;
position: relative;
right: 17.9px;
}
// .boxActive {
// background-color: $main-grey;
// cursor: pointer;
// height: 20px;
// width: 12px;
// }
// .boxInactiveHover {
// background-color: $white;
// cursor: pointer;
// height: 20px;
// width: 12px;
// &:hover {
// background-color: $light-grey;
// transition: .25s ease-in-out 0s;
// }
// }
}
// .pagePosition {
// float: right;
// position: relative;
// top: 4px;
// li {
// color: $blue;
// float: left;
// font-family: 'Fira Sans Condensed';
// font-size: 16px;
// font-style: italic;
// }
// // .leftRightBox {
// // border: 1px solid $main-grey;
// // float: left;
// // height: 26px;
// // padding: 2px 0 0 1.8px;
// // text-align: center;
// // width: 17.5px;
// // }
//
//
// // .leftBox {
// // border-right: 0;
// // }
//
// // .rightBox {
// // border-left: 0;
// // }
//
// .boxDiver {
// border-right: 1px solid $dark-grey;
// bottom: 5px;
// height: 35px;
// position: relative;
// right: 17.9px;
// }
//
// // .boxActive {
// // background-color: $main-grey;
// // cursor: pointer;
// // height: 20px;
// // width: 12px;
// // }
// // .boxInactiveHover {
// // background-color: $white;
// // cursor: pointer;
// // height: 20px;
// // width: 12px;
//
// // &:hover {
// // background-color: $light-grey;
// // transition: .25s ease-in-out 0s;
// // }
// // }
// }
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment