@justeattakeaway/pie-webc-core 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 0.8.0
+
+### Minor Changes
+
+- [Changed] - Update RTL mixin to infer dir by default and document ([#745](https://github.com/justeattakeaway/pie/pull/745)) by [@raoufswe](https://github.com/raoufswe)
+
 ## 0.7.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-webc-core",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "PIE design system base classes, mixins and utilities for web components",
   "type": "module",
   "main": "index.ts",
@@ -9,7 +9,9 @@
   "scripts": {
     "lint:scripts": "run -T eslint .",
     "lint:scripts:fix": "run -T eslint . --fix",
-    "test": "run -T vitest run"
+    "test": "run -T vitest run",
+    "test:ci": "yarn test",
+    "test:watch": "run -T vitest"
   },
   "volta": {
     "extends": "../../../package.json"

package/src/mixins/rtl/rtlMixin.ts

@@ -12,7 +12,7 @@ type htmlDirAttribute = 'ltr' | 'rtl' | 'auto';
  * Any component property interface that implements RTL should extend this interface. See the ModalProps interface for an example of this.
  */
 export interface RTLComponentProps {
-    dir: htmlDirAttribute
+    dir?: htmlDirAttribute
 }
 
 // This is just used by the dynamically constructed class below and does not need to be imported or referenced anywhere else
@@ -21,11 +21,23 @@ declare class _RTLInterface {
     isRTL: boolean;
 }
 
+/**
+ * This RTL mixin is used with Lit Web components to add programmatic Right-to-Left (RTL) support.
+ * It is only required if your component either:
+ * - Needs RTL awareness in its TypeScript logic.
+ * - Its CSS requires a [dir='rtl'] attribute to be present.
+ *
+ * By default, components will infer the 'dir' property from the document's root 'dir' attribute.
+ * If needed, it's possible to override specific components direction by setting the 'dir' property
+ * value. The 'dir' property value is reflected in the DOM, making it queryable. The 'isRTL'
+ * internal property returns true or false depending on whether or not the 'dir' property is 'rtl' or not.
+ */
+
 export const RtlMixin =
     <T extends Constructor<LitElement>>(superClass: T) => {
         class RTLElement extends superClass implements _RTLInterface {
             @property({ type: String, reflect: true })
-                dir : htmlDirAttribute = 'ltr';
+                dir : htmlDirAttribute = document?.documentElement?.dir as htmlDirAttribute ?? 'ltr';
 
             /**
              * Returns true if the element is in Right to Left mode.
@@ -37,15 +49,7 @@ export const RtlMixin =
              * will not be reactive and is only computed once
              */
             get isRTL () : boolean {
-                if (this.dir === 'ltr') {
-                    return false;
-                }
-
-                if (this.dir === 'rtl' || window?.getComputedStyle(this)?.direction === 'rtl') {
-                    return true;
-                }
-
-                return false;
+                return this.dir === 'rtl';
             }
         }
 

package/src/mixins/test/rtlMixin.spec.ts

@@ -0,0 +1,72 @@
+import { LitElement, html, nothing } from 'lit';
+import {
+    describe,
+    it,
+    expect,
+} from 'vitest';
+import { RTLComponentProps, RtlMixin } from '../index';
+
+const scenarios = [
+    { dir: 'ltr', isRTL: false },
+    { dir: 'rtl', isRTL: true },
+    { dir: 'auto', isRTL: false }
+];
+
+describe('RtlMixin', () => {
+    const componentSelector = 'rtl-mixin-mock';
+    class MockComponent extends RtlMixin(LitElement) implements RTLComponentProps {
+        render () {
+            const { isRTL, dir } = this;
+            return html`<div dir="${dir || nothing}">${isRTL ? 'RTL Mode' : 'LTR Mode'}</div>`;
+        }
+    }
+
+    customElements.define(componentSelector, MockComponent);
+
+    function getMockInstance (): MockComponent {
+        return document.body.querySelector(componentSelector) as MockComponent;
+    }
+
+    describe('when the dir attribute is set via the component', () => {
+        scenarios.forEach(({ dir, isRTL }) => {
+            it(`should default to ${dir} if the component dir attribute is set to ${dir}`, () => {
+            // Arrange
+                document.body.innerHTML = `<rtl-mixin-mock dir="${dir}"></rtl-mixin-mock>`;
+                const component = getMockInstance();
+
+                // Assert
+                expect(component.dir).toEqual(dir);
+                expect(component.isRTL).toBe(isRTL);
+            });
+        });
+    });
+
+    describe('when the dir attribute is set via the root document', () => {
+        scenarios.forEach(({ dir, isRTL }) => {
+            it(`should default to ${dir} if the root document dir attribute is set to ${dir}`, () => {
+                // Arrange
+                document.documentElement.setAttribute('dir', dir);
+                document.body.innerHTML = '<rtl-mixin-mock></rtl-mixin-mock>'; // component doesn't set dir
+                const component = getMockInstance();
+
+                // Assert
+                expect(component.dir).toEqual(dir);
+                expect(component.isRTL).toBe(isRTL);
+            });
+        });
+    });
+
+    it('should default to dir value of the component if the root document and component dir attribute are set', () => {
+        // Arrange
+        const rootDir = 'ltr';
+        const componentDir = 'rtl';
+        document.documentElement.setAttribute('dir', rootDir);
+        document.body.innerHTML = `<rtl-mixin-mock dir="${componentDir}"></rtl-mixin-mock>`;
+        const component = getMockInstance();
+
+        // Assert
+        expect(component.dir).toEqual(componentDir);
+        expect(component.dir).not.toEqual(rootDir);
+        expect(component.isRTL).toBeTruthy();
+    });
+});

package/vite.config.js

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+    test: {
+        environment: 'jsdom',
+    },
+});