feat: add RTL sticker sheets

cultureamp · Aug 24, 2023 · 9efd1b6 · 9efd1b6
1 parent 8deb61f
commit 9efd1b6
Showing 1 changed file with 26 additions and 3 deletions.
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 },
+}