michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Update UX of Divider comp

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-03 18:25:29 +05:30
parent 16f35d9a34
commit 9454ffd1af
2 changed files with 45 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/app/atoms/divider/Divider.jsx
View file

@ -4,8 +4,8 @@ import './Divider.scss';
import Text from '../text/Text';
function Divider({ text, variant }) {
const dividerClass = ` divider--${variant}`;
function Divider({ text, variant, align }) {
const dividerClass = ` divider--${variant} divider--${align}`;
return (
<div className={`divider${dividerClass}`}>
{text !== null && <Text className="divider__text" variant="b3">{text}</Text>}
@ -16,11 +16,13 @@ function Divider({ text, variant }) {
Divider.defaultProps = {
text: null,
variant: 'surface',
align: 'center',
};
Divider.propTypes = {
text: PropTypes.string,
variant: PropTypes.oneOf(['surface', 'primary', 'caution', 'danger']),
variant: PropTypes.oneOf(['surface', 'primary', 'positive', 'caution', 'danger']),
align: PropTypes.oneOf(['left', 'center', 'right']),
};
export default Divider;

75
src/app/atoms/divider/Divider.scss
View file

@ -1,68 +1,69 @@
.divider {
--local-divider-color: var(--bg-surface-border);
margin: var(--sp-extra-tight) var(--sp-normal);
margin-right: var(--sp-extra-tight);
display: flex;
align-items: center;
position: relative;
&::before {
content: "";
.divider-line {
content: '';
display: inline-block;
flex: 1;
margin-left: calc(var(--av-small) + var(--sp-tight));
border-bottom: 1px solid var(--local-divider-color);
opacity: 0.18;
opacity: var(--local-divider-opacity);
}
[dir=rtl] & {
margin: {
left: 0;
right: calc(var(--av-small) + var(--sp-tight));
}
.divider {
display: flex;
align-items: center;
&--center::before,
&--right::before {
@extend .divider-line;
}
&--center::after,
&--left::after {
@extend .divider-line;
}
&__text {
margin-left: var(--sp-normal);
}
[dir=rtl] & {
margin: {
left: var(--sp-extra-tight);
right: var(--sp-normal);
}
&__text {
margin: {
left: 0;
right: var(--sp-normal);
}
}
padding: 2px var(--sp-extra-tight);
border-radius: calc(var(--bo-radius) / 2);
font-weight: 500;
}
}
.divider--surface {
--local-divider-color: var(--tc-surface-low);
--local-divider-color: var(--bg-divider);
--local-divider-opacity: 1;
.divider__text {
color: var(--tc-surface-low);
border: 1px solid var(--bg-divider);
}
}
.divider--primary {
--local-divider-color: var(--bg-primary);
--local-divider-opacity: .8;
.divider__text {
color: var(--bg-primary);
color: var(--tc-primary-high);
background-color: var(--bg-primary);
}
}
.divider--positive {
--local-divider-color: var(--bg-positive);
--local-divider-opacity: .8;
.divider__text {
color: var(--bg-surface);
background-color: var(--bg-positive);
}
}
.divider--danger {
--local-divider-color: var(--bg-danger);
--local-divider-opacity: .8;
.divider__text {
color: var(--bg-danger);
color: var(--bg-surface);
background-color: var(--bg-danger);
}
}
.divider--caution {
--local-divider-color: var(--bg-caution);
--local-divider-opacity: .8;
.divider__text {
color: var(--bg-caution);
color: var(--bg-surface);
background-color: var(--bg-caution);
}
}