Merge branch 'main' into fix-slack-notify

cultureamp · Aug 24, 2023 · fb188b5 · fb188b5
2 parents 530771a + 86b4ad0
commit fb188b5
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 17 deletions.
diff --git a/.changeset/twelve-ears-rush.md b/.changeset/twelve-ears-rush.md
@@ -0,0 +1,5 @@
+---
+"@kaizen/draft-likert-scale-legacy": minor
+---
+
+Fix RTL styles like Likert Scale
diff --git a/...-packages/likert-scale-legacy/KaizenDraft/LikertScaleLegacy/LikertScaleLegacy.module.scss b/...-packages/likert-scale-legacy/KaizenDraft/LikertScaleLegacy/LikertScaleLegacy.module.scss
@@ -33,39 +33,53 @@ $fifth: $color-red-500;
   -webkit-animation: pop cubic-bezier(0, 0.94, 0.32, 1) 0.7s 1;
 }
 
+@mixin right-likert-item($height) {
+  border-top-right-radius: $height;
+  border-bottom-right-radius: $height;
+}
+
+@mixin left-likert-item($height) {
+  border-top-left-radius: $height;
+  border-bottom-left-radius: $height;
+}
+
 @mixin fill($height) {
   &:first-child .likertItemFill {
-    border-top-left-radius: $height;
-    border-bottom-left-radius: $height;
+    @include left-likert-item($height);
 
     [dir="rtl"] & {
-      border-radius: $height 0;
+      border-radius: 0;
+
+      @include right-likert-item($height);
     }
 
     &::after {
-      border-top-left-radius: $height;
-      border-bottom-left-radius: $height;
+      @include left-likert-item($height);
 
       [dir="rtl"] & {
-        border-radius: $height 0;
+        border-radius: 0;
+
+        @include right-likert-item($height);
       }
     }
   }
 
   &:last-child .likertItemFill {
-    border-top-right-radius: $height;
-    border-bottom-right-radius: $height;
+    @include right-likert-item($height);
 
     [dir="rtl"] & {
-      border-radius: 0 $height;
+      border-radius: 0;
+
+      @include left-likert-item($height);
     }
 
     &::after {
-      border-top-right-radius: $height;
-      border-bottom-right-radius: $height;
+      @include right-likert-item($height);
 
       [dir="rtl"] & {
-        border-radius: 0 $height;
+        border-radius: 0;
+
+        @include left-likert-item($height);
       }
     }
   }
@@ -145,8 +159,13 @@ $fifth: $color-red-500;
 
   &[dir="rtl"],
   [dir="rtl"] & {
-    margin-right: 2px;
-    margin-left: 2px;
+    &:first-child {
+      margin-left: 2px;
+    }
+
+    &:last-child {
+      margin-right: 2px;
+    }
   }
 
   @include fill($block-height);

diff --git a/draft-packages/likert-scale-legacy/docs/LikertScaleLegacy.stories.tsx b/draft-packages/likert-scale-legacy/docs/LikertScaleLegacy.stories.tsx
@@ -78,9 +78,10 @@ DefaultStory.args = {
   labelId: "456",
 }
 
-const StickerSheetTemplate: StoryFn<{ isReversed: boolean }> = ({
-  isReversed,
-}) => {
+const StickerSheetTemplate: StoryFn<{
+  isReversed: boolean
+  textDirection: "ltr" | "rtl"
+}> = ({ isReversed }) => {
   const SectionHeading = ({ heading }: { heading: string }): JSX.Element => (
     <Heading variant="heading-3" tag="h1" color={isReversed ? "white" : "dark"}>
       {heading}
@@ -176,3 +177,25 @@ StickerSheetReversed.parameters = {
   chromatic: { disable: false },
   controls: { disable: true },
 }
+
+export const StickerSheetRTL = StickerSheetTemplate.bind({})
+StickerSheetRTL.storyName = "Sticker Sheet (RTL)"
+StickerSheetRTL.args = {
+  textDirection: "rtl", // Global control; see storybook/preview.tsx
+}
+StickerSheetRTL.parameters = {
+  chromatic: { disable: false },
+  controls: { disable: true },
+}
+
+export const StickerSheetReversedRTL = StickerSheetTemplate.bind({})
+StickerSheetReversedRTL.storyName = "Sticker Sheet (Reversed & RTL)"
+StickerSheetReversedRTL.args = {
+  isReversed: true,
+  textDirection: "rtl", // Global control; see storybook/preview.tsx
+}
+StickerSheetReversedRTL.parameters = {
+  backgrounds: { default: "Purple 700" },
+  chromatic: { disable: false },
+  controls: { disable: true },
+}