Refactor - Rose::Page::Layout (#2849)

* Refactor: Rose::Page::Layout - header, actions and breadcrumbs (#2813)

* refactor: 💡 page::layout- header,breadcrumb and actions

* refactor: 💡 added new class for the page layout, fixed a11y

* refactor: 💡 addressed comments

* refactor: 💡 moved copy snippet to PH.Generic

* refactor: 💡 addressed comments

* Refactor: Rose::Page::Layout - header, actions and breadcrumbs Part 2 (#2825)

* refactor: 💡 rose page layout header

* refactor: 💡 removed extra classes

* Refactor: Rose::Page::Layout - header, actions and breadcrumbs Final Part (#2840)

* refactor: 💡 rose page layout header

* Refactor: Rose::Page::Layout - header, actions and breadcrumbs (#2813)

* refactor: 💡 page::layout- header,breadcrumb and actions

* refactor: 💡 added new class for the page layout, fixed a11y

* refactor: 💡 addressed comments

* refactor: 💡 moved copy snippet to PH.Generic

* refactor: 💡 addressed comments

* Refactor: Rose::Page::Layout - header, actions and breadcrumbs Part 2 (#2825)

* refactor: 💡 rose page layout header

* refactor: 💡 removed extra classes

* refactor: 💡 fixed a11y heading, actions dropdown

* refactor: 💡 fixed page header

* refactor: 💡 fix heading margin and failing tests

* refactor: 💡 add back margin for hds header tags

* refactor: 💡 fix style

addons/rose/addon/components/rose/layout/page/index.hbs

@@ -6,11 +6,7 @@
 <div ...attributes class='rose-layout-page'>
   {{yield
     (hash
-      breadcrumbs=(component
-        'rose/anonymous' class='rose-layout-page-breadcrumbs'
-      )
       header=(component 'rose/anonymous' class='rose-layout-page-header')
-      actions=(component 'rose/anonymous' class='rose-layout-page-actions')
       navigation=(component
         'rose/anonymous' class='rose-layout-page-navigation'
       )

addons/rose/app/styles/rose/components/header/_dropdown.scss

@@ -5,7 +5,7 @@
 
 .rose-header {
   // Temporary fix: This header component will be retired upon integrating HDS side nav for desktop.
-   .header-dropdown-button-override > button {
+  .header-dropdown-button-override > button {
     background: var(--black);
     border: none;
     color: var(--white);

addons/rose/app/styles/rose/components/layout/_page.scss

@@ -9,36 +9,32 @@
 .rose-layout-page {
   display: grid;
   grid-template-areas:
-    'breadcrumbs breadcrumbs breadcrumbs'
-    'header header actions'
+    'header header header'
     'navigation navigation navigation'
     'body body body';
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: auto 1fr;
 
-  .rose-layout-page-breadcrumbs {
-    grid-area: breadcrumbs;
-  }
-
   .rose-layout-page-header {
     grid-area: header;
+    margin-bottom: sizing.rems(s);
 
-    h2 {
+    h1 {
       display: flex;
-      gap: sizing.rems(xxs);
+      align-items: center;
+      gap: sizing.rems(xs);
+      margin: 0;
 
       .doc-link {
         display: flex;
         align-items: center;
       }
     }
-  }
 
-  .rose-layout-page-actions {
-    grid-area: actions;
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
+    .hds-copy-snippet {
+      align-self: start;
+      margin-top: sizing.rems(s);
+    }
   }
 
   .rose-layout-page-navigation {
@@ -55,9 +51,7 @@
   .rose-layout-page {
     grid-template-columns: 1fr;
     grid-template-areas:
-      'breadcrumbs'
       'header'
-      'actions'
       'navigation'
       'body';
   }