Added rtl support for component. (#885)

Co-authored-by: Aditya R Joshi <aditya.joshi-t@jud.ca.gov>
JudicialCouncilOfCalifornia · May 15, 2024 · f7ae74c · f7ae74c
1 parent fd20c06
commit f7ae74c
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 0 deletions.
diff --git a/source/_patterns/00-protons/base/_global.scss b/source/_patterns/00-protons/base/_global.scss
@@ -533,3 +533,69 @@ $aspect-width: 16;
   @include button-unstyled;
   @include u-text("blue-cool-60v");
 }
+
+// Custom ordered list elements
+@mixin custom-counter-rtl() {
+  counter-increment: step-counter;
+  position: relative;
+
+  &::before {
+    @include u-font(heading, 11);
+    padding: 0.625rem;
+    background-color: color("white");
+    border: 3px solid color("gold-30v");
+    border-radius: 50%;
+    color: color("primary");
+    content: counter(step-counter);
+    height: 3.5rem;
+    line-height: 1.25;
+    text-align: center;
+    width: 3.5rem;
+    display: block;
+    z-index: 2;
+
+    @include at-media(desktop) {
+      @include u-font(heading, 14);
+      position: absolute;
+      top: -7px;
+      right: 0;
+      bottom: 0;
+      right: -7px;
+      height: 4.6875rem;
+      width: 4.6875rem;
+    }
+  }
+}
+
+@mixin custom-counter-line-rtl() {
+  &:after {
+    content: "";
+    display: block;
+    width: 88%;
+    position: absolute;
+    z-index: 1;
+    height: 3px;
+    top: 1.625rem;
+    right: 3.5rem;
+    background-color: color(accent-warm-dark);
+
+    @include at-media(tablet) {
+      width: 92%;
+    }
+
+    @include at-media(desktop) {
+      top: 2.5rem;
+      right: 1.875rem;
+      height: 100%;
+      width: 3px;
+    }
+  }
+
+  &:last-of-type {
+    @include at-media(desktop) {
+      &:after {
+        height: 0;
+      }
+    }
+  }
+}
diff --git a/source/_patterns/01-atoms/typography/_text.scss b/source/_patterns/01-atoms/typography/_text.scss
@@ -172,6 +172,12 @@ a.usa-link,
   @include u-margin-bottom(3);
 }
 
+html[dir="rtl"] .jcc-title {
+  &:after {
+    right: 0 !important;
+  }
+}
+
 .jcc-lead {
   @include responsive-lead();
   @include u-margin-bottom(2);

diff --git a/source/_patterns/03-organisms/sections/steps/_steps.scss b/source/_patterns/03-organisms/sections/steps/_steps.scss
@@ -71,3 +71,35 @@
     }
   }
 }
+// Custom ordered list elements
+html[dir="rtl"] .jcc-steps {
+  @include unstyled-list();
+
+  .jcc-step__item {
+    @include custom-counter-rtl();
+    @include custom-counter-line-rtl();
+    @include add-list-reset;
+
+    @include at-media(desktop) {
+      padding-right: 6rem;
+    }
+  }
+}
+
+html[dir="rtl"] .jcc-steps-section {
+  @include section-wrapper;
+
+  .jcc-header-group {
+    @include u-padding-bottom(6);
+  }
+
+  .jcc-header-group__title {
+    @extend .jcc-title;
+  }
+  .jcc-header-group__title:after {
+    right: 0;
+  }
+  @include at-media(desktop) {
+    right: 0;
+  }
+}