Merge pull request #939 from dpc-sdp/fix/r20-1626-rtl-followup

[R20-1626][R20-1627] RTL style followup
dpc-sdp · Nov 22, 2023 · e2afded · e2afded
2 parents 1e8c662 + 8740a73
commit e2afded
Show file tree

Hide file tree

Showing 17 changed files with 418 additions and 7 deletions.
diff --git a/examples/nuxt-app/app.config.ts b/examples/nuxt-app/app.config.ts
@@ -1,4 +1,4 @@
-import pkg from './package.json' assert { type: 'json' }
+import pkg from './package.json'
 import { getDpcPkgs } from '@dpc-sdp/ripple-tide-api/utils'
 
 export default defineAppConfig({

diff --git a/examples/nuxt-app/package.json b/examples/nuxt-app/package.json
@@ -18,7 +18,7 @@
     "cy:open": "cypress open --e2e --browser electron",
     "cy:run": "cypress run --record",
     "test:ci": "NUXT_PUBLIC_API_URL=http://localhost:3001 API_PORT=3001 start-test start tcp:3000 'cy:run'",
-    "test:integration": "start-test 'NUXT_PUBLIC_API_URL=http://localhost:3001 API_PORT=3001 pnpm dev' 'http-get://localhost:3000/api/tide/site?id=8888' 'cy:open'"
+    "test:integration": "NUXT_PUBLIC_TIDE_SITE=TEST_SITE NUXT_PUBLIC_TIDE_BASE_URL=https://test.base.url/ start-test dev:mock tcp:3000 'cy:open'"
   },
   "dependencies": {
     "@dpc-sdp/nuxt-ripple": "workspace:*",

diff --git a/examples/nuxt-app/test/features/landingpage/languages.feature b/examples/nuxt-app/test/features/landingpage/languages.feature
@@ -7,12 +7,12 @@ Feature: Languages
   Scenario: RTL languages load with the correct font and direction
     Given the page endpoint for path "/arabic-page" returns fixture "/landingpage/languages-ar" with status 200
     When I visit the page "/arabic-page"
-    Then The section ".rpl-header" should be display "rtl" in "ar" with the font "Noto Kufi Arabic"
-    And The section "#rpl-main" should be display "rtl" in "ar" with the font "Noto Kufi Arabic"
+    Then the section ".rpl-header" should be display "rtl" in "ar" with the font "Noto Kufi Arabic"
+    And the section "#rpl-main" should be display "rtl" in "ar" with the font "Noto Kufi Arabic"
 
   @mockserver
   Scenario: LTR languages load with the correct font and direction
     Given the page endpoint for path "/korean-page" returns fixture "/landingpage/languages-ko" with status 200
     When I visit the page "/korean-page"
-    Then The section ".rpl-header" should be display "ltr" in "ko" with the font "Noto Sans KR"
-    And The section "#rpl-main" should be display "ltr" in "ko" with the font "Noto Sans KR"
+    Then the section ".rpl-header" should be display "ltr" in "ko" with the font "Noto Sans KR"
+    And the section "#rpl-main" should be display "ltr" in "ko" with the font "Noto Sans KR"
diff --git a/examples/nuxt-app/test/features/rtl/rtl-form.feature b/examples/nuxt-app/test/features/rtl/rtl-form.feature
@@ -0,0 +1,12 @@
+Feature: RTL form page
+
+  Example of mocked page
+  Background:
+    Given the page endpoint for path "/rtl-form" returns fixture "/rtl/form" with status 200
+    And the site endpoint returns fixture "/site/reference" with status 200
+    Given I visit the page "/rtl-form"
+
+  @mockserver
+  Scenario: RTL form page renders non-text elements correctly
+    Then the section ".rpl-header" should be display "rtl" in "fa" with the font "Noto Naskh Arabic"
+    And the section "#rpl-main" should be display "rtl" in "fa" with the font "Noto Naskh Arabic"
diff --git a/examples/nuxt-app/test/features/rtl/rtl-page.feature b/examples/nuxt-app/test/features/rtl/rtl-page.feature
@@ -0,0 +1,12 @@
+Feature: RTL complete page
+
+  Example of mocked page
+  Background:
+    Given the page endpoint for path "/rtl" returns fixture "/rtl/page" with status 200
+    And the site endpoint returns fixture "/site/reference" with status 200
+    Given I visit the page "/rtl"
+
+  @mockserver
+  Scenario: RTL page renders non-text elements correctly
+    Then the section ".rpl-header" should be display "rtl" in "fa" with the font "Noto Naskh Arabic"
+    And the section "#rpl-main" should be display "rtl" in "fa" with the font "Noto Naskh Arabic"
diff --git a/examples/nuxt-app/test/fixtures/rtl/form.json b/examples/nuxt-app/test/fixtures/rtl/form.json
diff --git a/examples/nuxt-app/test/fixtures/rtl/page.json b/examples/nuxt-app/test/fixtures/rtl/page.json
diff --git a/packages/ripple-test-utils/step_definitions/common/languages.ts b/packages/ripple-test-utils/step_definitions/common/languages.ts
@@ -1,7 +1,7 @@
 import { Then } from '@badeball/cypress-cucumber-preprocessor'
 
 Then(
-  `The section {string} should be display {string} in {string} with the font {string}`,
+  `the section {string} should be display {string} in {string} with the font {string}`,
   (selector: string, direction: string, language: string, font: string) => {
     cy.get(selector).as('section')
 

diff --git a/packages/ripple-ui-core/src/components/accordion/RplAccordion.css b/packages/ripple-ui-core/src/components/accordion/RplAccordion.css
@@ -176,3 +176,32 @@
     padding-left: 0;
   }
 }
+
+[dir='rtl'] .rpl-accordion__toggle-all-wrapper {
+  justify-content: flex-start;
+}
+
+[dir='rtl'] .rpl-accordion__item::after {
+  right: 0;
+}
+
+[dir='rtl'] .rpl-accordion__item-icon {
+  margin-left: 0;
+  margin-right: var(--rpl-sp-4);
+
+  @media (--rpl-bp-l) {
+    margin-left: 0;
+    margin-right: var(--rpl-sp-6);
+  }
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+[dir='rtl'] .rpl-accordion__item-number {
+  margin-left: var(--rpl-sp-2);
+  margin-right: 0;
+
+  @media (--rpl-bp-l) {
+    margin-left: var(--rpl-sp-3);
+    margin-right: 0;
+  }
+}
diff --git a/packages/ripple-ui-core/src/components/icon/RplIcon.css b/packages/ripple-ui-core/src/components/icon/RplIcon.css
@@ -80,3 +80,10 @@
 .rpl-svg-sprite--hidden {
   display: none;
 }
+
+[dir='rtl'] .rpl-icon--child {
+  border-left: 0;
+  border-right: var(--rpl-border-1) solid var(--rpl-clr-type-default);
+  margin-left: 0;
+  margin-right: var(--rpl-sp-2);
+}
diff --git a/packages/ripple-ui-core/src/components/in-page-navigation/RplInPageNavigation.css b/packages/ripple-ui-core/src/components/in-page-navigation/RplInPageNavigation.css
@@ -84,3 +84,30 @@
     }
   }
 }
+
+[dir='rtl'] .rpl-in-page-navigation {
+  border-left-style: none;
+  border-left-width: 0;
+  border-right-style: solid;
+  border-right-width: var(--rpl-border-3);
+  border-image: var(--rpl-clr-gradient-vertical) 1 100%;
+  padding-left: 0;
+  padding-right: var(--rpl-sp-3);
+
+  @media (--rpl-bp-m) {
+    padding-left: 0;
+    padding-right: var(--rpl-sp-4);
+  }
+
+  /* stylelint-disable-next-line no-descending-specificity */
+  .rpl-list__items--sub .rpl-list__item {
+    margin-left: 0;
+    margin-right: var(--local-sub-indent);
+
+    .rpl-icon--child {
+      float: right;
+      margin-left: 1rem;
+      margin-right: calc(-1 * var(--local-sub-indent) + 0.9rem);
+    }
+  }
+}
diff --git a/packages/ripple-ui-core/src/styles/components/_callout.css b/packages/ripple-ui-core/src/styles/components/_callout.css
@@ -41,3 +41,8 @@
     }
   }
 }
+
+[dir='rtl'] .rpl-callout {
+  border-left: 0;
+  border-right: var(--rpl-border-3) solid var(--rpl-clr-accent);
+}
diff --git a/packages/ripple-ui-core/src/styles/components/_document.css b/packages/ripple-ui-core/src/styles/components/_document.css
@@ -68,3 +68,8 @@
 .rpl-document--centered .rpl-document__link {
   align-items: center;
 }
+
+[dir='rtl'] .rpl-document__icon {
+  margin-left: var(--rpl-sp-4);
+  margin-right: 0;
+}
diff --git a/packages/ripple-ui-core/src/styles/utilities/_lists.css b/packages/ripple-ui-core/src/styles/utilities/_lists.css
@@ -126,3 +126,39 @@
     }
   }
 }
+
+[dir='rtl'] .rpl-type-list-ol,
+[dir='rtl'] .rpl-content ol,
+[dir='rtl'] .rpl-type-list-ul,
+[dir='rtl'] .rpl-content ul {
+  margin-left: 0;
+  margin-right: var(--rpl-sp-4);
+  padding-left: 0;
+  padding-right: var(--rpl-sp-4);
+
+  @media (--rpl-bp-l) {
+    margin-left: 0;
+    margin-right: var(--rpl-sp-5);
+  }
+
+  > li {
+    padding: 0 var(--rpl-sp-2) var(--rpl-sp-2) 0;
+  }
+}
+
+[dir='rtl'] .rpl-type-list-ul,
+[dir='rtl'] .rpl-content ul {
+  > li {
+    &::before {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 1.1rem;
+      right: -0.9rem;
+      background-color: currentcolor;
+      width: 0.5rem;
+      height: 0.5rem;
+      border-radius: 50%;
+    }
+  }
+}
diff --git a/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.css b/packages/ripple-ui-forms/src/components/RplFormDropdown/RplFormDropdown.css
@@ -156,3 +156,13 @@
     border-color: var(--rpl-clr-dark);
   }
 }
+
+[dir='rtl'] .rpl-form-dropdown-input {
+  padding-left: calc(var(--rpl-sp-2) + var(--rpl-sp-4) + var(--rpl-sp-5));
+  padding-right: var(--rpl-sp-5);
+}
+
+[dir='rtl'] .rpl-form-dropdown__chevron {
+  right: auto;
+  left: var(--rpl-sp-5);
+}
diff --git a/packages/ripple-ui-forms/src/components/RplFormInput/RplFormInput.css b/packages/ripple-ui-forms/src/components/RplFormInput/RplFormInput.css
@@ -96,3 +96,15 @@
 .rpl-form__input-icon__suffix {
   right: var(--local-icon-spacing);
 }
+
+[dir='rtl'] .rpl-form__input-icon__suffix {
+  left: var(--local-icon-spacing);
+  right: auto;
+}
+
+[dir='rtl'] .rpl-form__input--with-suffix-icon input {
+  padding-left: calc(
+    var(--rpl-sp-4) + var(--local-icon-spacing) + var(--rpl-sp-2)
+  );
+  padding-right: 0;
+}
diff --git a/packages/ripple-ui-forms/src/components/RplFormOptions/RplFormOption.css b/packages/ripple-ui-forms/src/components/RplFormOptions/RplFormOption.css
@@ -23,6 +23,11 @@
   margin-top: 1px;
 }
 
+[dir='rtl'] .rpl-form-option__label-text {
+  margin-left: 0;
+  margin-right: var(--rpl-sp-3);
+}
+
 .rpl-form-option__mark {
   width: var(--rpl-sp-6);
   height: var(--rpl-sp-6);