update tabs title (#2794)

* update tabs title * add til tag class parameter * rename utility class * rename utility class * rename utility class * add test
ONSdigital · Sep 5, 2023 · 4eb0b64 · 4eb0b64
1 parent 4c59b6a
commit 4eb0b64
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 1 deletion.
diff --git a/src/components/tabs/_macro-options.md b/src/components/tabs/_macro-options.md
@@ -2,6 +2,7 @@
 | ------------------ | --------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
 | title              | string          | true     | The `h2` level heading for the tabs `section` element required to give context for screen readers. Visually hidden when tabs are visible. |
 | titleTag           | string          | false    | The HTML heading tag to wrap the title text in for it’s correct semantic order on the page. Will default to an `h2`                       |
+| titleClasses       | string          | false    | Additional utility classes to be added to titleTag                                                                                        |
 | tabs               | array`<tab>`    | true     | An array of [tabs](#tab)                                                                                                                  |
 | variants           | array`<string>` | false    | Adjust the component using available variants: “details”                                                                                  |
 | noInitialActiveTab | boolean         | false    | Do not initially show an active tab when `true`.                                                                                          |

diff --git a/src/components/tabs/_macro.njk b/src/components/tabs/_macro.njk
@@ -11,7 +11,7 @@
         {% if params.noInitialActiveTab %}data-no-initial-active-tab="true"{% endif %}
     >
         {% set titleTag = params.titleTag | default("h2") %}
-        <{{ titleTag }} class="ons-tabs__title ons-u-fs-r--b ons-u-mt-no">{{ params.title }}</{{ titleTag }}>
+        <{{ titleTag }} class="ons-tabs__title ons-u-fs-r--b ons-u-mt-no{% if params.titleClasses %} {{ params.titleClasses }}{% endif %}">{{ params.title }}</{{ titleTag }}>
         <div>
             <ul class="ons-tabs__list">
                 {%- for tab in params.tabs -%}

diff --git a/src/components/tabs/example-tabs.njk b/src/components/tabs/example-tabs.njk
@@ -3,6 +3,7 @@
 {{
     onsTabs({
         "title": 'Contents',
+        "titleClasses": 'ons-u-fs-m',
         "tabs": [
             {
                 "id": "ukis",

diff --git a/src/components/tabs/tabs.spec.js b/src/components/tabs/tabs.spec.js
@@ -6,6 +6,7 @@ const iPhoneX = KnownDevices['iPhone X'];
 
 const EXAMPLE_TABS = {
   title: 'Example tabs',
+  titleClasses: 'ons-u-fs-m',
   tabs: [
     {
       id: 'tab.id.1',
@@ -75,6 +76,12 @@ describe('script: tabs', () => {
       await setTestPage('/test', renderComponent('tabs', EXAMPLE_TABS));
     });
 
+    it('has additionally provided `titleClasses`', async () => {
+      const hasClass = await page.$eval('.ons-tabs__title', (node) => node.classList.contains('ons-u-fs-m'));
+
+      expect(hasClass).toBe(true);
+    });
+
     it('has the "presentation" role assigned to tab list items', async () => {
       const role = await page.$eval('.ons-tab__list-item', (node) => node.getAttribute('role'));
       expect(role).toBe('presentation');