From 9346d256b7d6efe20037c1c6bea03fc4714de2c9 Mon Sep 17 00:00:00 2001
From: Lungan Catalin <catalin.lungan@endava.com>
Date: Tue, 25 Jun 2024 17:37:37 +0300
Subject: [PATCH 1/4] refactor(Page Title): use CSS logical properties instead
 of physical values

---
 .../_storybook/bq-page-title.stories.tsx           | 14 +++++++-------
 .../src/components/page-title/bq-page-title.tsx    |  6 +++---
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/beeq/src/components/page-title/_storybook/bq-page-title.stories.tsx b/packages/beeq/src/components/page-title/_storybook/bq-page-title.stories.tsx
index f76447696..792b0a249 100644
--- a/packages/beeq/src/components/page-title/_storybook/bq-page-title.stories.tsx
+++ b/packages/beeq/src/components/page-title/_storybook/bq-page-title.stories.tsx
@@ -29,7 +29,7 @@ const Template = (args: Args) => {
   const customDivider = args.customDivider
     ? html`<bq-divider
         slot="divider"
-        class="mb-m block"
+        class="block m-be-m"
         stroke-color="stroke--secondary"
         stroke-thickness="1"
         dashed
@@ -94,8 +94,8 @@ export const TitleBackActions: Story = {
     title: 'Title',
     'sub-title': 'Sub-title',
     actions: html`
-      <bq-icon class="p-xs2" color="text--brand" name="pencil-simple" weight="bold"></bq-icon>
-      <bq-icon class="p-xs2" color="text--brand" name="download-simple" weight="bold"></bq-icon>
+      <bq-icon class="p-b-xs2 p-i-xs2" color="text--brand" name="pencil-simple" weight="bold"></bq-icon>
+      <bq-icon class="p-b-xs2 p-i-xs2" color="text--brand" name="download-simple" weight="bold"></bq-icon>
     `,
     'custom-style': true,
   },
@@ -109,8 +109,8 @@ export const TitleBackActionsCustomDefault: Story = {
     title: 'Title',
     'sub-title': 'Sub-title',
     actions: html`
-      <bq-icon class="p-xs2" color="text--brand" name="pencil-simple" weight="bold"></bq-icon>
-      <bq-icon class="p-xs2" color="text--brand" name="download-simple" weight="bold"></bq-icon>
+      <bq-icon class="p-b-xs2 p-i-xs2" color="text--brand" name="pencil-simple" weight="bold"></bq-icon>
+      <bq-icon class="p-b-xs2 p-i-xs2" color="text--brand" name="download-simple" weight="bold"></bq-icon>
     `,
   },
 };
@@ -124,8 +124,8 @@ export const TitleBackActionsCustom: Story = {
     title: 'Title',
     'sub-title': 'Sub-title',
     actions: html`
-      <bq-icon class="p-xs2" color="text--brand" name="pencil-simple" weight="bold"></bq-icon>
-      <bq-icon class="p-xs2" color="text--brand" name="download-simple" weight="bold"></bq-icon>
+      <bq-icon class="p-b-xs2 p-i-xs2" color="text--brand" name="pencil-simple" weight="bold"></bq-icon>
+      <bq-icon class="p-b-xs2 p-i-xs2" color="text--brand" name="download-simple" weight="bold"></bq-icon>
     `,
     'custom-style': true,
   },
diff --git a/packages/beeq/src/components/page-title/bq-page-title.tsx b/packages/beeq/src/components/page-title/bq-page-title.tsx
index 4c5c244a4..e10cb7245 100644
--- a/packages/beeq/src/components/page-title/bq-page-title.tsx
+++ b/packages/beeq/src/components/page-title/bq-page-title.tsx
@@ -81,7 +81,7 @@ export class BqPageTitle {
   render() {
     return (
       <div class="flex flex-col" part="wrapper">
-        <div class="flex gap-xs [padding-block:--paddingY]" part="base">
+        <div class="flex gap-xs p-b-[--paddingY]" part="base">
           {/* Back navigation button */}
           <div
             class={{ flex: true, '!hidden': !this.haveBackNavigation }}
@@ -101,7 +101,7 @@ export class BqPageTitle {
               </h1>
               {/* Suffix */}
               <div
-                class={{ 'flex flex-grow gap-xs p-xs2': true, '!hidden': !this.hasSuffix }}
+                class={{ 'flex flex-grow gap-xs p-b-xs2 p-i-xs2': true, '!hidden': !this.hasSuffix }}
                 ref={(divElem) => (this.suffixElem = divElem)}
                 part="suffix"
               >
@@ -125,7 +125,7 @@ export class BqPageTitle {
         {/* Divider */}
         <div part="divider">
           <slot name="divider">
-            <bq-divider class="mb-m block" stroke-color="ui--secondary" stroke-thickness="1" />
+            <bq-divider class="block m-be-m" stroke-color="ui--secondary" stroke-thickness="1" />
           </slot>
         </div>
       </div>

From 2733ee0209fe739a39d506ae8fd9e2fce983a3cc Mon Sep 17 00:00:00 2001
From: Lungan Catalin <catalin.lungan@endava.com>
Date: Mon, 1 Jul 2024 11:36:02 +0300
Subject: [PATCH 2/4] refactor(Page Title): replace SVG divider with boder to
 properly support writing-mode

---
 packages/beeq/src/components/divider/readme.md     |  2 --
 .../_storybook/bq-page-title.stories.tsx           | 11 -----------
 .../src/components/page-title/bq-page-title.tsx    |  9 +--------
 packages/beeq/src/components/page-title/readme.md  | 14 --------------
 .../components/page-title/scss/bq-page-title.scss  |  7 +++++++
 .../page-title/scss/bq-page-title.variables.scss   |  2 ++
 6 files changed, 10 insertions(+), 35 deletions(-)

diff --git a/packages/beeq/src/components/divider/readme.md b/packages/beeq/src/components/divider/readme.md
index fb2d6d962..7b26b0873 100644
--- a/packages/beeq/src/components/divider/readme.md
+++ b/packages/beeq/src/components/divider/readme.md
@@ -34,14 +34,12 @@
 ### Used by
 
  - [bq-drawer](../drawer)
- - [bq-page-title](../page-title)
  - [bq-steps](../steps)
 
 ### Graph
 ```mermaid
 graph TD;
   bq-drawer --> bq-divider
-  bq-page-title --> bq-divider
   bq-steps --> bq-divider
   style bq-divider fill:#f9f,stroke:#333,stroke-width:4px
 ```
diff --git a/packages/beeq/src/components/page-title/_storybook/bq-page-title.stories.tsx b/packages/beeq/src/components/page-title/_storybook/bq-page-title.stories.tsx
index 792b0a249..cd8359ab6 100644
--- a/packages/beeq/src/components/page-title/_storybook/bq-page-title.stories.tsx
+++ b/packages/beeq/src/components/page-title/_storybook/bq-page-title.stories.tsx
@@ -26,16 +26,6 @@ export default meta;
 type Story = StoryObj;
 
 const Template = (args: Args) => {
-  const customDivider = args.customDivider
-    ? html`<bq-divider
-        slot="divider"
-        class="block m-be-m"
-        stroke-color="stroke--secondary"
-        stroke-thickness="1"
-        dashed
-      />`
-    : nothing;
-
   const actionsSlotClass = args['custom-style'] ? 'flex flex-grow justify-end' : 'flex';
 
   return html`
@@ -55,7 +45,6 @@ const Template = (args: Args) => {
         : nothing}
       ${args.title} ${args['sub-title'] ? html`<div slot="sub-title">${args['sub-title']}</div>` : nothing}
       ${args.actions ? html`<div class="${actionsSlotClass}" slot="suffix">${args.actions}</div>` : nothing}
-      ${customDivider}
     </bq-page-title>
   `;
 };
diff --git a/packages/beeq/src/components/page-title/bq-page-title.tsx b/packages/beeq/src/components/page-title/bq-page-title.tsx
index e10cb7245..1dbd52006 100644
--- a/packages/beeq/src/components/page-title/bq-page-title.tsx
+++ b/packages/beeq/src/components/page-title/bq-page-title.tsx
@@ -7,7 +7,6 @@ import { hasSlotContent } from '../../shared/utils';
  * @part base - The inner container `<div>`of element that contains the base page title component.
  * @part content - Defines the main container of the page title component, which includes the title and subtitle elements.
  * @part title-suffix - Defines the container that holds the title and any suffix content.
- * @part divider - The inner container `<div>` of element that acts as divider slot container.
  * @part back - The container `<div>` page title element that acts as back slot container.
  * @part title - The `<h1>` element serves as a container for the page title content, to improve accessibility.
  * @part suffix - The `<div>` page title element that acts as suffix slot container.
@@ -81,7 +80,7 @@ export class BqPageTitle {
   render() {
     return (
       <div class="flex flex-col" part="wrapper">
-        <div class="flex gap-xs p-b-[--paddingY]" part="base">
+        <div class="bq-page-title-base" part="base">
           {/* Back navigation button */}
           <div
             class={{ flex: true, '!hidden': !this.haveBackNavigation }}
@@ -122,12 +121,6 @@ export class BqPageTitle {
             </div>
           </div>
         </div>
-        {/* Divider */}
-        <div part="divider">
-          <slot name="divider">
-            <bq-divider class="block m-be-m" stroke-color="ui--secondary" stroke-thickness="1" />
-          </slot>
-        </div>
       </div>
     );
   }
diff --git a/packages/beeq/src/components/page-title/readme.md b/packages/beeq/src/components/page-title/readme.md
index 9b5022473..352d0cfc4 100644
--- a/packages/beeq/src/components/page-title/readme.md
+++ b/packages/beeq/src/components/page-title/readme.md
@@ -12,7 +12,6 @@
 | `"back"`         | The container `<div>` page title element that acts as back slot container.                              |
 | `"base"`         | The inner container `<div>`of element that contains the base page title component.                      |
 | `"content"`      | Defines the main container of the page title component, which includes the title and subtitle elements. |
-| `"divider"`      | The inner container `<div>` of element that acts as divider slot container.                             |
 | `"sub-title"`    | The `<div>` page title element that acts as sub-title slot container.                                   |
 | `"suffix"`       | The `<div>` page title element that acts as suffix slot container.                                      |
 | `"title"`        | The `<h1>` element serves as a container for the page title content, to improve accessibility.          |
@@ -20,19 +19,6 @@
 | `"wrapper"`      | The wrapper container `<div>` of the element inside the shadow DOM.                                     |
 
 
-## Dependencies
-
-### Depends on
-
-- [bq-divider](../divider)
-
-### Graph
-```mermaid
-graph TD;
-  bq-page-title --> bq-divider
-  style bq-page-title fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/beeq/src/components/page-title/scss/bq-page-title.scss b/packages/beeq/src/components/page-title/scss/bq-page-title.scss
index 885e4333a..1a7a04cd7 100644
--- a/packages/beeq/src/components/page-title/scss/bq-page-title.scss
+++ b/packages/beeq/src/components/page-title/scss/bq-page-title.scss
@@ -7,3 +7,10 @@
 :host {
   @apply block;
 }
+
+.bq-page-title-base {
+  @apply flex gap-xs p-b-[--paddingY];
+
+  /* stylelint-disable-next-line custom-property-pattern */
+  border-block-end: 1px solid var(--subtitle-borderBlockEnd);
+}
diff --git a/packages/beeq/src/components/page-title/scss/bq-page-title.variables.scss b/packages/beeq/src/components/page-title/scss/bq-page-title.variables.scss
index 2a993d4c3..fbb01bbd3 100644
--- a/packages/beeq/src/components/page-title/scss/bq-page-title.variables.scss
+++ b/packages/beeq/src/components/page-title/scss/bq-page-title.variables.scss
@@ -12,6 +12,7 @@
    * @prop --title-fontWeight - Page title font weight for title
    * @prop --title-textColor - Page title color for title
    * @prop --title-textSize - Page title text size for title
+   * @prop --subtitle-borderBlockEnd - Page title border end color
    */
 
   /* stylelint-disable custom-property-pattern */
@@ -23,4 +24,5 @@
   --title-fontWeight: theme(fontWeight.bold);
   --title-textColor: theme(textColor.text.primary);
   --title-textSize: theme(fontSize.xxl);
+  --subtitle-borderBlockEnd: theme(colors.stroke.primary);
 }

From 061a4b50aca84421d4dc18dbd9069a134254d667 Mon Sep 17 00:00:00 2001
From: Lungan Catalin <catalin.lungan@endava.com>
Date: Mon, 1 Jul 2024 11:51:54 +0300
Subject: [PATCH 3/4] refactor(Page Title): remove unused e2e test

---
 .../page-title/__tests__/bq-page-title.e2e.ts | 20 -------------------
 1 file changed, 20 deletions(-)

diff --git a/packages/beeq/src/components/page-title/__tests__/bq-page-title.e2e.ts b/packages/beeq/src/components/page-title/__tests__/bq-page-title.e2e.ts
index 2fe9856dc..fa95ec70e 100644
--- a/packages/beeq/src/components/page-title/__tests__/bq-page-title.e2e.ts
+++ b/packages/beeq/src/components/page-title/__tests__/bq-page-title.e2e.ts
@@ -40,24 +40,4 @@ describe('bq-page-title', () => {
     const suffixSlot = await page.find('bq-page-title >>> slot[name="suffix"]');
     expect(suffixSlot).not.toBeNull();
   });
-
-  it('should render title + sub-title + divider', async () => {
-    const page = await newE2EPage({
-      html: `
-        <bq-page-title>
-          Title
-          <div slot="sub-title">
-            Sub-title
-          </div>
-          <div slot="divider">
-            <bq-divider />
-          </div>
-        </bq-page-title>`,
-    });
-    const subTitleSlot = await page.find('bq-page-title >>> slot[name="sub-title"]');
-    expect(subTitleSlot).not.toBeNull();
-
-    const dividerSlot = await page.find('bq-page-title >>> slot[name="divider"]');
-    expect(dividerSlot).not.toBeNull();
-  });
 });

From c55cdf1d5a56d1ea75f332823d90f87a5112c728 Mon Sep 17 00:00:00 2001
From: Lungan Catalin <catalin.lungan@endava.com>
Date: Mon, 1 Jul 2024 16:39:39 +0300
Subject: [PATCH 4/4] refactor(Page Title): clean code

---
 .../components/page-title/bq-page-title.tsx   | 73 +++++++++----------
 .../beeq/src/components/page-title/readme.md  |  1 -
 .../page-title/scss/bq-page-title.scss        |  7 --
 .../scss/bq-page-title.variables.scss         |  8 +-
 4 files changed, 39 insertions(+), 50 deletions(-)

diff --git a/packages/beeq/src/components/page-title/bq-page-title.tsx b/packages/beeq/src/components/page-title/bq-page-title.tsx
index 1dbd52006..4904ae99e 100644
--- a/packages/beeq/src/components/page-title/bq-page-title.tsx
+++ b/packages/beeq/src/components/page-title/bq-page-title.tsx
@@ -3,7 +3,6 @@ import { Component, Element, h, State } from '@stencil/core';
 import { hasSlotContent } from '../../shared/utils';
 
 /**
- * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM.
  * @part base - The inner container `<div>`of element that contains the base page title component.
  * @part content - Defines the main container of the page title component, which includes the title and subtitle elements.
  * @part title-suffix - Defines the container that holds the title and any suffix content.
@@ -79,47 +78,45 @@ export class BqPageTitle {
 
   render() {
     return (
-      <div class="flex flex-col" part="wrapper">
-        <div class="bq-page-title-base" part="base">
-          {/* Back navigation button */}
-          <div
-            class={{ flex: true, '!hidden': !this.haveBackNavigation }}
-            ref={(divElem) => (this.backNavigationElem = divElem)}
-            part="back"
-          >
-            <slot name="back" onSlotchange={this.handleSlotChange} />
-          </div>
-          <div class="flex flex-grow flex-col gap-xs" part="content">
-            <div class="flex items-center gap-xs" part="title-suffix">
-              {/* Title */}
-              <h1
-                class="title-font text-[length:--title-textSize] font-[--title-fontWeight] leading-[--title-lineHeight] text-[color:--title-textColor]"
-                part="title"
-              >
-                <slot />
-              </h1>
-              {/* Suffix */}
-              <div
-                class={{ 'flex flex-grow gap-xs p-b-xs2 p-i-xs2': true, '!hidden': !this.hasSuffix }}
-                ref={(divElem) => (this.suffixElem = divElem)}
-                part="suffix"
-              >
-                <slot name="suffix" onSlotchange={this.handleSlotChange} />
-              </div>
-            </div>
-            {/* Sub-title */}
+      <div class="flex gap-xs p-b-[--paddingY] [border-block-end:--subtitle-borderBlockEnd]" part="base">
+        {/* Back navigation button */}
+        <div
+          class={{ flex: true, '!hidden': !this.haveBackNavigation }}
+          ref={(divElem) => (this.backNavigationElem = divElem)}
+          part="back"
+        >
+          <slot name="back" onSlotchange={this.handleSlotChange} />
+        </div>
+        <div class="flex flex-grow flex-col gap-xs" part="content">
+          <div class="flex items-center gap-xs" part="title-suffix">
+            {/* Title */}
+            <h1
+              class="title-font text-[length:--title-textSize] font-[--title-fontWeight] leading-[--title-lineHeight] text-[color:--title-textColor]"
+              part="title"
+            >
+              <slot />
+            </h1>
+            {/* Suffix */}
             <div
-              class={{
-                'title-font text-[length:--subtitle-textSize] font-[--subtitle-fontWeight] leading-[--title-lineHeight] text-[color:--subtitle-textColor]':
-                  true,
-                hidden: !this.hasSubTitle,
-              }}
-              ref={(divElem) => (this.subTitleElem = divElem)}
-              part="sub-title"
+              class={{ 'flex flex-grow gap-xs p-b-xs2 p-i-xs2': true, '!hidden': !this.hasSuffix }}
+              ref={(divElem) => (this.suffixElem = divElem)}
+              part="suffix"
             >
-              <slot name="sub-title" onSlotchange={this.handleSlotChange} />
+              <slot name="suffix" onSlotchange={this.handleSlotChange} />
             </div>
           </div>
+          {/* Sub-title */}
+          <div
+            class={{
+              'title-font text-[length:--subtitle-textSize] font-[--subtitle-fontWeight] leading-[--title-lineHeight] text-[color:--subtitle-textColor]':
+                true,
+              hidden: !this.hasSubTitle,
+            }}
+            ref={(divElem) => (this.subTitleElem = divElem)}
+            part="sub-title"
+          >
+            <slot name="sub-title" onSlotchange={this.handleSlotChange} />
+          </div>
         </div>
       </div>
     );
diff --git a/packages/beeq/src/components/page-title/readme.md b/packages/beeq/src/components/page-title/readme.md
index 352d0cfc4..5ec0e68db 100644
--- a/packages/beeq/src/components/page-title/readme.md
+++ b/packages/beeq/src/components/page-title/readme.md
@@ -16,7 +16,6 @@
 | `"suffix"`       | The `<div>` page title element that acts as suffix slot container.                                      |
 | `"title"`        | The `<h1>` element serves as a container for the page title content, to improve accessibility.          |
 | `"title-suffix"` | Defines the container that holds the title and any suffix content.                                      |
-| `"wrapper"`      | The wrapper container `<div>` of the element inside the shadow DOM.                                     |
 
 
 ----------------------------------------------
diff --git a/packages/beeq/src/components/page-title/scss/bq-page-title.scss b/packages/beeq/src/components/page-title/scss/bq-page-title.scss
index 1a7a04cd7..885e4333a 100644
--- a/packages/beeq/src/components/page-title/scss/bq-page-title.scss
+++ b/packages/beeq/src/components/page-title/scss/bq-page-title.scss
@@ -7,10 +7,3 @@
 :host {
   @apply block;
 }
-
-.bq-page-title-base {
-  @apply flex gap-xs p-b-[--paddingY];
-
-  /* stylelint-disable-next-line custom-property-pattern */
-  border-block-end: 1px solid var(--subtitle-borderBlockEnd);
-}
diff --git a/packages/beeq/src/components/page-title/scss/bq-page-title.variables.scss b/packages/beeq/src/components/page-title/scss/bq-page-title.variables.scss
index fbb01bbd3..98b31d02e 100644
--- a/packages/beeq/src/components/page-title/scss/bq-page-title.variables.scss
+++ b/packages/beeq/src/components/page-title/scss/bq-page-title.variables.scss
@@ -5,24 +5,24 @@
 :host {
   /**
    * @prop --paddingY - Padding top and bottom of the page title wrapper
+   * @prop --subtitle-borderBlockEnd - Page title border end color
    * @prop --subtitle-fontWeight - Page title font weight for subtitle
    * @prop --subtitle-textColor - Page title color for sub-title
    * @prop --subtitle-textSize - Page title text size for subtitle
-   * @prop --title-lineHeight - Page title text line height
    * @prop --title-fontWeight - Page title font weight for title
+   * @prop --title-lineHeight - Page title text line height
    * @prop --title-textColor - Page title color for title
    * @prop --title-textSize - Page title text size for title
-   * @prop --subtitle-borderBlockEnd - Page title border end color
    */
 
   /* stylelint-disable custom-property-pattern */
   --paddingY: theme(spacing.xl);
+  --subtitle-borderBlockEnd: 1px solid theme(colors.stroke.primary);
   --subtitle-fontWeight: theme(fontWeight.medium);
   --subtitle-textColor: theme(textColor.text.secondary);
   --subtitle-textSize: theme(fontSize.l);
-  --title-lineHeight: theme(lineHeight.regular);
   --title-fontWeight: theme(fontWeight.bold);
+  --title-lineHeight: theme(lineHeight.regular);
   --title-textColor: theme(textColor.text.primary);
   --title-textSize: theme(fontSize.xxl);
-  --subtitle-borderBlockEnd: theme(colors.stroke.primary);
 }