Update UX of Divider comp

Signed-off-by: Ajay Bura <ajbura@gmail.com>

diff --git a/src/app/atoms/divider/Divider.jsx b/src/app/atoms/divider/Divider.jsx
index b524ec2df6df405e2f6c3696240d7ad1fec8a2e4..76a9731564c7c9e471ff7b7a66a8013fdf68f736 100644 (file)
--- a/src/app/atoms/divider/Divider.jsx
+++ b/src/app/atoms/divider/Divider.jsx
@@ -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;

diff --git a/src/app/atoms/divider/Divider.scss b/src/app/atoms/divider/Divider.scss
index ded59af2535a4f7b0a939f535f91d62bcd7d634d..a7dbbb274ec5ff71a191de28fefeaff63d79ed50 100644 (file)
--- a/src/app/atoms/divider/Divider.scss
+++ b/src/app/atoms/divider/Divider.scss
@@ -1,68 +1,69 @@
-.divider {
-  --local-divider-color: var(--bg-surface-border);
+.divider-line {
+  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);
-  margin-right: var(--sp-extra-tight);
+.divider {
   display: flex;
   align-items: center;
-  position: relative;
-
-  &::before {
-    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;
 
-    [dir=rtl] & {
-      margin: {
-        left: 0;
-        right: calc(var(--av-small) + var(--sp-tight));
-      }
-    }
+  &--center::before,
+  &--right::before {
+    @extend .divider-line;
   }
-
-  &__text {
-    margin-left: var(--sp-normal);
+  &--center::after,
+  &--left::after {
+    @extend .divider-line;
   }
 
-  [dir=rtl] & {
-    margin: {
-      left: var(--sp-extra-tight);
-      right: var(--sp-normal);
-    }
-
-    &__text {
-      margin: {
-        left: 0;
-        right: var(--sp-normal);
-      }
-    }
+  &__text {
+    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(--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-primary);
+    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);
   }
-}
\ No newline at end of file
+}