fix: default header changed for components

docs/_includes/demo-page-components/app-sidebar-content.html

@@ -84,7 +84,7 @@
                         </ul>
                     </div>
                     <div class="fd-side-nav__group">
-                        <h1 class="fd-side-nav__title">Group</h1>
+                        <h3 class="fd-side-nav__title">Group</h3>
                         <ul class="fd-side-nav__list">
                             <li class="fd-side-nav__item">
                                 <a class="fd-side-nav__link" href="#">
@@ -107,9 +107,9 @@ <h1 class="fd-side-nav__title">Group</h1>
                     <header class="fd-page__header">
                         <div class="fd-action-bar">
                             <div class="fd-action-bar__header">
-                                <h1 class="fd-action-bar__title">
+                                <h3 class="fd-action-bar__title">
                                     Page Title
-                                </h1>
+                                </h3>
                                 <p class="fd-action-bar__description">Optional page intro lorem ipsum dolor</p>
                             </div>
                             <div class="fd-action-bar__actions">

docs/_includes/demo-page-components/fd-page__header.html

@@ -1,9 +1,9 @@
 <header class="fd-page__header">
     <div class="fd-action-bar">
         <div class="fd-action-bar__header">
-          <h1 class="fd-action-bar__title">
+          <h3 class="fd-action-bar__title">
               {{ include.title }}
-          </h1>
+          </h3>
           <p class="fd-action-bar__description">Optional page intro lorem ipsum dolor</p>
         </div>
         {% if include.hide-add-btn != "true" %}

docs/_includes/demo-page-components/modal-app-overlay.html

@@ -2,7 +2,7 @@
     <div class="fd-modal" role="dialog">
       <div class="fd-modal__content" role="document">
           <header class="fd-modal__header">
-              <h1 class="fd-modal__title">Modal Header</h1>
+              <h3 class="fd-modal__title">Modal Header</h3>
               <button class="fd-button--light fd-modal__close"></button>
           </header>
           <div class="fd-modal__body">

docs/pages/components/action-bar.md

@@ -12,7 +12,9 @@ The Action Bar is located at the top of the page and is used for the following:
 {: .docs-intro}
 - Page title
 - Main Actions for the page
-
+
+<br>
+We use an H3 header here, however header sizes from H2 to H6 are also acceptable.
 <br>
 
 ## Action bar with back button, description and action buttons.
@@ -22,9 +24,9 @@ The Action Bar is located at the top of the page and is used for the following:
         <button class="fd-button--light fd-button--compact sap-icon--nav-back"></button>
     </div>
     <div class="fd-action-bar__header">
-        <h1 class="fd-action-bar__title">
+        <h3 class="fd-action-bar__title">
         Page Title
-        </h1>
+        </h3>
         <p class="fd-action-bar__description">Action bar Description </p>
     </div>
     <div class="fd-action-bar__actions">
@@ -42,9 +44,9 @@ The Action Bar is located at the top of the page and is used for the following:
 {% capture default-action-bar-multi %}
 <div class="fd-action-bar">
     <div class="fd-action-bar__header">
-        <h1 class="fd-action-bar__title">
+        <h3 class="fd-action-bar__title">
             Page Title
-        </h1>
+        </h3>
         <p class="fd-action-bar__description">Action bar Description </p>
     </div>
     <div class="fd-action-bar__actions">
@@ -65,9 +67,9 @@ When there are several main actions for a page, consider displaying them under a
 {% capture default-action-bar-menu %}
 <div class="fd-action-bar">
     <div class="fd-action-bar__header">
-      <h1 class="fd-action-bar__title">
+      <h3 class="fd-action-bar__title">
           Page Title
-      </h1>
+      </h3>
     </div>
     <div class="fd-action-bar__actions">
             <div class="fd-popover">
@@ -98,15 +100,15 @@ When there are several main actions for a page, consider displaying them under a
 ## Action bar mobile view
 
 {% capture default-action-bar-multi %}
-<div style="width:319px">
+<div style="width:319px;">
     <div class="fd-action-bar">
         <div class="fd-action-bar__back">
             <button class="fd-button--light fd-button--compact sap-icon--nav-back"></button>
         </div>
         <div class="fd-action-bar__header">
-            <h1 class="fd-action-bar__title">
+            <h3 class="fd-action-bar__title">
                 Action Bar with description and back button
-            </h1>
+            </h3>
         </div>
         <div class="fd-action-bar__actions">
             <div class="fd-popover">

docs/pages/components/mega-menu.md

@@ -12,14 +12,16 @@ summary:
 Mega menu is used in conjunction with Context Switcher within the Global Navigation (link to Global Nav page) and supports two levels within a hierarchy.
 {: .docs-intro}
 
+<br>
+We use an H3 header here, however header sizes from H2 to H6 are also acceptable.
 <br>
 
 ## Default Mega Menu
 
 {% capture default-alert %}
 <nav class="fd-mega-menu" id="">
     <div class="fd-mega-menu__group">
-        <h1 class="fd-mega-menu__title">Group Name</h1>
+        <h3 class="fd-mega-menu__title">Group Name</h3>
         <ul class="fd-mega-menu__list">
             <li class="fd-mega-menu__item">
                 <a class="fd-mega-menu__link" href="#">
@@ -56,7 +58,7 @@ Mega menu is used in conjunction with Context Switcher within the Global Navigat
         </ul>
     </div>
     <div class="fd-mega-menu__group">
-        <h1 class="fd-mega-menu__title">Group Name</h1>
+        <h3 class="fd-mega-menu__title">Group Name</h3>
         <ul class="fd-mega-menu__list">
             <li class="fd-mega-menu__item">
                 <a class="fd-mega-menu__link" href="#">

docs/pages/components/menu.md

@@ -13,6 +13,8 @@ The menu component is the listing structure with optional headers to create menu
 {: .docs-intro}
 Commonly used as the contents when composing "dropdowns", "contextual menus", "mega menu", etc, when paired with the popover component.
 
+<br>
+We use an H3 header here, however header sizes from H2 to H6 are also acceptable.
 <br>
 
 ## Menu
@@ -64,7 +66,7 @@ You can optionally add hierarchy to menus by grouping sub-menus and adding heade
         <li><a href="#" class="fd-menu__item">Option 3</a></li>
     </ul>
     <div class="fd-menu__group">
-        <h1 class="fd-menu__title">Group Header</h1>
+        <h3 class="fd-menu__title">Group Header</h3>
         <ul class="fd-menu__list">
             <li><a href="#" class="fd-menu__item">Option 4</a></li>
             <li><a href="#" class="fd-menu__item">Option 5</a></li>

docs/pages/components/modal.md

@@ -12,7 +12,8 @@ summary:
 The modal is a container generally displayed in response to an action.
 {: .docs-intro}
 It is used for short forms, confirmation messages or to display contextual information that does not require a page. The modal should always be used in conjunction with the [Application Layout Containers](/layouts/application-layout.html#application-with-ui-overlay). See an example [App layout page with Modal](/demo-pages/modal-overlay-demo-page.html)
-
+<br>
+We use an H3 header here, however header sizes from H2 to H6 are also acceptable.
 <br>  
 
 
@@ -52,7 +53,7 @@ This is used to confirm with the user before continuing with a destructive or co
 <div class="fd-modal">
     <div class="fd-modal__content" role="document">
         <div class="fd-modal__header">
-            <h1 class="fd-modal__title">Delete</h1>
+            <h3 class="fd-modal__title">Delete</h3>
             <button class="fd-button--light fd-modal__close" aria-label="close"></button>
         </div>
         <div class="fd-modal__body">
@@ -81,7 +82,7 @@ This is used for short forms in order to collect information from the user.
 <div class="fd-modal">
     <div class="fd-modal__content" role="document">
         <div class="fd-modal__header">
-            <h1 class="fd-modal__title">Invite user</h1>
+            <h3 class="fd-modal__title">Invite user</h3>
             <button class="fd-button--light fd-modal__close" aria-label="close"></button>
         </div>
         <div class="fd-modal__body">

docs/pages/components/side-navigation.md

@@ -11,7 +11,8 @@ summary:
 
 The left navigation can always display or expand/collapse using the menu icon within the global navigation.
 {: .docs-intro}
-
+<br>
+We use an H3 header here, however header sizes from H2 to H6 are also acceptable.
 <br>
 
 ## Side Navigation with one level
@@ -61,7 +62,7 @@ Use this to group navigation. Titles are not clickable.
 {% capture default %}
 <nav class="fd-side-nav">
     <div class="fd-side-nav__group">
-        <h1 class="fd-side-nav__title">Group Title</h1>
+        <h3 class="fd-side-nav__title">Group Title</h3>
         <ul class="fd-side-nav__list">
             <li class="fd-side-nav__item">
                 <a class="fd-side-nav__link" href="#">
@@ -91,7 +92,7 @@ Use this to group navigation. Titles are not clickable.
         </ul>
     </div>
     <div class="fd-side-nav__group">
-        <h1 class="fd-side-nav__title">Group Title</h1>
+        <h3 class="fd-side-nav__title">Group Title</h3>
         <ul class="fd-side-nav__list">
             <li class="fd-side-nav__item">
                 <a class="fd-side-nav__link" href="#">
@@ -131,7 +132,7 @@ Use this when there is more than one level of hierarchy in the left navigation.
 {% capture default %}
 <nav class="fd-side-nav">
     <div class="fd-side-nav__group">
-        <h1 class="fd-side-nav__title">Group Name</h1>
+        <h3 class="fd-side-nav__title">Group Name</h3>
         <ul class="fd-side-nav__list">
             <li class="fd-side-nav__item">
                 <a class="fd-side-nav__link" href="#">
@@ -215,7 +216,7 @@ Use this when there is more than one level of hierarchy in the left navigation.
 </ul>
 </div>
 <div class="fd-side-nav__group">
-    <h1 class="fd-side-nav__title">Group Name</h1>
+    <h3 class="fd-side-nav__title">Group Name</h3>
     <ul class="fd-side-nav__list">
         <li class="fd-side-nav__item">
             <a class="fd-side-nav__link" href="#">

test/templates/action-bar/component.njk

@@ -12,10 +12,18 @@ action_bar:
         <button class="fd-button--light sap-icon--nav-back"></button>
     </div>
     {%- endif %}
+
     <div class="fd-action-bar__header">
-        <h1 class="fd-action-bar__title">
-        {{ properties.title }}
-        </h1>
+        {%- if properties.title_size %}
+        {%- set title_size = properties.title_size %}
+        <{{title_size}} class="fd-action-bar__title">
+            {{ properties.title }}
+        </ {{title_size}}>
+        {%- else %}
+        <h3 class="fd-action-bar__title">
+            {{ properties.title }}
+        </h3>
+        {%- endif %}
         {%- if properties.description %}
         <p class="fd-action-bar__description">{{ properties.description }}</p>
         {%- endif %}

test/templates/action-bar/index.njk

@@ -95,6 +95,82 @@
     )
 }}
 
+{{  action_bar(
+        properties={
+            title: "Action Bar with H2 header",
+            title_size: "h2",
+            actions: {
+                properties: {
+                    items: [secbtn,primarybtn]
+                }
+            },
+            back_button: true
+        },
+        modifier={
+            block: []
+        },
+        state={},
+        aria={}
+    )
+}}
+
+{{  action_bar(
+        properties={
+            title: "Action Bar with H4 header",
+            title_size: "h4",
+            actions: {
+                properties: {
+                    items: [secbtn,primarybtn]
+                }
+            },
+            back_button: true
+        },
+        modifier={
+            block: []
+        },
+        state={},
+        aria={}
+    )
+}}
+
+{{  action_bar(
+        properties={
+            title: "Action Bar with H5 header",
+            title_size: "h5",
+            actions: {
+                properties: {
+                    items: [secbtn,primarybtn]
+                }
+            },
+            back_button: true
+        },
+        modifier={
+            block: []
+        },
+        state={},
+        aria={}
+    )
+}}
+
+{{  action_bar(
+        properties={
+            title: "Action Bar with H6 header",
+            title_size: "h6",
+            actions: {
+                properties: {
+                    items: [secbtn,primarybtn]
+                }
+            },
+            back_button: true
+        },
+        modifier={
+            block: []
+        },
+        state={},
+        aria={}
+    )
+}}
+
 {{  action_bar(
         properties={
             title: "Action Bar with no back button",

test/templates/mega-menu/component.njk

@@ -64,7 +64,12 @@ mega_menu:
 {%- macro navgroup(properties={}) -%}
 {%- for navgroup in properties -%}
 <div class="fd-mega-menu__group">
-    <h1 class="fd-mega-menu__title">{{ navgroup.title }}</h1>
+    {%- if navgroup.title_size %}
+    {%- set title_size = navgroup.title_size %}
+        <{{title_size}} class="fd-mega-menu__title">{{ navgroup.title }}</{{title_size}}>
+    {%- else %}
+        <h3 class="fd-mega-menu__title">{{ navgroup.title }}</h3>
+    {%- endif %}
     {{ navlist(navgroup.items) }}
 </div>
 {%- endfor -%}