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'; import Text from '../text/Text';
function Divider({ text, variant }) { function Divider({ text, variant, align }) {
const dividerClass = ` divider--${variant}`; const dividerClass = ` divider--${variant} divider--${align}`;
return ( return (
<div className={`divider${dividerClass}`}> <div className={`divider${dividerClass}`}>
{text !== null && <Text className="divider__text" variant="b3">{text}</Text>} {text !== null && <Text className="divider__text" variant="b3">{text}</Text>}
@ -16,11 +16,13 @@ function Divider({ text, variant }) {
Divider.defaultProps = { Divider.defaultProps = {
text: null, text: null,
variant: 'surface', variant: 'surface',
align: 'center',
}; };
Divider.propTypes = { Divider.propTypes = {
text: PropTypes.string, 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; export default Divider;

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

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