From 35a4e0cedca909d14ed68e552ebc4fa5c82efe40 Mon Sep 17 00:00:00 2001
From: "maryia.radchuk" <maryia.radchuk@justeattakeaway.com>
Date: Wed, 10 Jul 2024 17:06:00 +0200
Subject: [PATCH 1/3] feat(pie-checkbox-group): DSW-2182 enabling/disabling
 children + aria attr updates

---
 packages/components/pie-checkbox/src/defs.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/pie-checkbox/src/defs.ts b/packages/components/pie-checkbox/src/defs.ts
index 2c585b5f62..12916b60d0 100644
--- a/packages/components/pie-checkbox/src/defs.ts
+++ b/packages/components/pie-checkbox/src/defs.ts
@@ -56,6 +56,7 @@ export const defaultProps: DefaultProps = {
     // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
     value: 'on',
     disabled: false,
+    disabledByParent: false,
     defaultChecked: false,
     checked: false,
     indeterminate: false,

From 19658a0791412f37c7d7539f51c000a4ab034a6f Mon Sep 17 00:00:00 2001
From: "maryia.radchuk" <maryia.radchuk@justeattakeaway.com>
Date: Mon, 15 Jul 2024 13:50:13 +0200
Subject: [PATCH 2/3] feat(pie-checkbox-group): DSW-2182 checkbox-group styling

---
 packages/components/pie-checkbox/src/defs.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/pie-checkbox/src/defs.ts b/packages/components/pie-checkbox/src/defs.ts
index 12916b60d0..2c585b5f62 100644
--- a/packages/components/pie-checkbox/src/defs.ts
+++ b/packages/components/pie-checkbox/src/defs.ts
@@ -56,7 +56,6 @@ export const defaultProps: DefaultProps = {
     // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value
     value: 'on',
     disabled: false,
-    disabledByParent: false,
     defaultChecked: false,
     checked: false,
     indeterminate: false,

From 11ab49b19646fa6df4a12c2186ac449472593763 Mon Sep 17 00:00:00 2001
From: "maryia.radchuk" <maryia.radchuk@justeattakeaway.com>
Date: Wed, 24 Jul 2024 11:13:46 +0200
Subject: [PATCH 3/3] feat(pie-webc): DSW-2182 isRtl attr changed to
 data-is-rtl

---
 .changeset/neat-cooks-pay.md                               | 7 +++++++
 packages/components/pie-checkbox/src/checkbox.scss         | 4 ++--
 packages/components/pie-checkbox/src/index.ts              | 3 ++-
 packages/components/pie-switch/src/index.ts                | 2 +-
 packages/components/pie-switch/src/switch.scss             | 2 +-
 .../components/pie-webc-core/src/mixins/rtl/rtlMixin.ts    | 6 +++---
 6 files changed, 16 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/neat-cooks-pay.md

diff --git a/.changeset/neat-cooks-pay.md b/.changeset/neat-cooks-pay.md
new file mode 100644
index 0000000000..54ce33184a
--- /dev/null
+++ b/.changeset/neat-cooks-pay.md
@@ -0,0 +1,7 @@
+---
+"@justeattakeaway/pie-checkbox": patch
+"@justeattakeaway/pie-switch": patch
+"@justeattakeaway/pie-webc": patch
+---
+
+[Changed] - isRtl attr changed to data-is-rtl
diff --git a/packages/components/pie-checkbox/src/checkbox.scss b/packages/components/pie-checkbox/src/checkbox.scss
index 7755e1b787..b922f317ee 100644
--- a/packages/components/pie-checkbox/src/checkbox.scss
+++ b/packages/components/pie-checkbox/src/checkbox.scss
@@ -134,7 +134,7 @@
         }
     }
 
-    &[data-pie-checked][isRtl]:before {
+    &[data-pie-checked][data-is-rtl]:before {
         left: unset;
         right: 50%;
     }
@@ -184,7 +184,7 @@
     background-color: white;
 }
 
-.c-checkbox-tick[isRtl]:after {
+.c-checkbox-tick[data-is-rtl]:after {
     left: unset;
     right: 14%;
 }
diff --git a/packages/components/pie-checkbox/src/index.ts b/packages/components/pie-checkbox/src/index.ts
index 6b2c850f9e..f6cc18d52d 100644
--- a/packages/components/pie-checkbox/src/index.ts
+++ b/packages/components/pie-checkbox/src/index.ts
@@ -153,6 +153,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
             indeterminate,
             assistiveText,
             status,
+            isRTL,
         } = this;
 
         const componentDisabled = disabled || disabledByParent;
@@ -180,7 +181,7 @@ export class PieCheckbox extends FormControlMixin(RtlMixin(LitElement)) implemen
             <label for="inputId" data-test-id="checkbox-component">
                 <span
                     class="c-checkbox-tick"
-                    ?isRTL=${this.isRTL}
+                    ?data-is-rtl=${isRTL}
                     ?data-pie-checked=${checked}
                     ?data-pie-disabled=${componentDisabled}
                     data-pie-status=${!componentDisabled && status}
diff --git a/packages/components/pie-switch/src/index.ts b/packages/components/pie-switch/src/index.ts
index 5ca99f66a0..adb93e19cf 100644
--- a/packages/components/pie-switch/src/index.ts
+++ b/packages/components/pie-switch/src/index.ts
@@ -181,7 +181,7 @@ export class PieSwitch extends FormControlMixin(RtlMixin(LitElement)) implements
         return html`
             <label
                 class="c-switch-wrapper"
-                ?isRTL=${isRTL}
+                ?data-is-rtl=${isRTL}
                 ?disabled=${disabled}>
                 ${labelPlacement === 'leading' ? this.renderSwitchLabel() : nothing}
                 <div
diff --git a/packages/components/pie-switch/src/switch.scss b/packages/components/pie-switch/src/switch.scss
index 19c7925266..84c256f3e7 100644
--- a/packages/components/pie-switch/src/switch.scss
+++ b/packages/components/pie-switch/src/switch.scss
@@ -136,7 +136,7 @@
     @include p.visually-hidden;
 }
 
-.c-switch-wrapper[isRTL] {
+.c-switch-wrapper[data-is-rtl] {
     .c-switch-control {
         position: absolute;
         left: initial;
diff --git a/packages/components/pie-webc-core/src/mixins/rtl/rtlMixin.ts b/packages/components/pie-webc-core/src/mixins/rtl/rtlMixin.ts
index 67ab3e3250..010d45d607 100644
--- a/packages/components/pie-webc-core/src/mixins/rtl/rtlMixin.ts
+++ b/packages/components/pie-webc-core/src/mixins/rtl/rtlMixin.ts
@@ -41,16 +41,16 @@ export interface RTLInterface {
  *
  * class MyStyledElement extends RtlMixin(LitElement) {
  *   render() {
- *     return html`<div class="foo" ?isRTL=${this.isRTL}>Content</div>`;
+ *     return html`<div class="foo" ?data-is-rtl=${this.isRTL}>Content</div>`;
  *   }
  * }
  *
  * customElements.define('my-styled-element', MyStyledElement);
  * ```
  *
- * The corresponding SCSS to leverage the `isRTL` attribute:
+ * The corresponding SCSS to leverage the `data-is-rtl` attribute:
  * ```scss
- * .foo[isRTL] {
+ * .foo[data-is-rtl] {
  *   background-color: red;
  *   text-align: right;
  * }