@ons/design-system 63.0.0 → 64.0.0

package/components/tabs/tabs.spec.js

@@ -9,6 +9,7 @@ const EXAMPLE_TABS = {
     {
       id: 'tab.id.1',
       title: 'Tab 1',
+      showTitle: true,
       content: 'First content...',
     },
     {
@@ -24,6 +25,38 @@ const EXAMPLE_TABS = {
   ],
 };
 
+const EXAMPLE_TABS_LONGER = {
+  title: 'Example tabs',
+  tabs: [
+    {
+      id: 'tab.id.1',
+      title: 'Tab 1',
+      showTitle: true,
+      content: 'First content...',
+    },
+    {
+      id: 'tab.id.2',
+      title: 'Tab 2',
+      content: 'Second content...',
+    },
+    {
+      id: 'tab.id.3',
+      title: 'Tab 3',
+      content: 'Third content...',
+    },
+    {
+      id: 'tab.id.4',
+      title: 'Tab 4',
+      content: 'Fourth content...',
+    },
+    {
+      id: 'tab.id.5',
+      title: 'Tab 5',
+      content: 'Fifth content...',
+    },
+  ],
+};
+
 const EXAMPLE_TABS_WITH_NO_INITIAL_ACTIVE_TAB = {
   ...EXAMPLE_TABS,
   noInitialActiveTab: true,
@@ -175,7 +208,7 @@ describe('script: tabs', () => {
     beforeEach(async () => {
       await page.emulate(puppeteer.devices['iPhone X']);
 
-      await setTestPage('/test', renderComponent('tabs', EXAMPLE_TABS));
+      await setTestPage('/test', renderComponent('tabs', EXAMPLE_TABS_LONGER));
     });
 
     it('has no aria attributes on tabs', async () => {
@@ -194,11 +227,16 @@ describe('script: tabs', () => {
 
     it('has no hidden tab panels', async () => {
       const panelCount = await page.$$eval('.ons-tabs__panel', nodes => nodes.length);
-      expect(panelCount).toBe(3);
+      expect(panelCount).toBe(5);
 
       const hiddenPanelCount = await page.$$eval('.ons-tabs__panel--hidden', nodes => nodes.length);
       expect(hiddenPanelCount).toBe(0);
     });
+
+    it('displays a h2 element with a unique id', async () => {
+      const panelCount = await page.$$eval('#tab-1-content-title', nodes => nodes.length);
+      expect(panelCount).toBe(1);
+    });
   });
 
   describe('when `data-no-initial-active-tab` is present', () => {

package/components/textarea/_macro.njk

@@ -26,8 +26,8 @@
             rows="{{ params.rows | default(8) }}"
             {% if params.charCheckLimit and params.charCheckLimit.limit %}
                 maxlength="{{ params.charCheckLimit.limit }}"
-                data-char-limit-ref="{{ params.id }}-lim-remaining"
-                aria-describedby="{{ params.id }}-lim-remaining"
+                data-char-limit-ref="{{ params.id }}-lim"
+                aria-describedby="{{ params.id }}-lim"
             {% endif %}
             {% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %}{{ attribute }}{% if value %}="{{ value }}"{% endif %} {% endfor %}{% endif %}
         >{{ params.value if params.value }}</textarea>

package/components/textarea/_macro.spec.js

@@ -216,13 +216,13 @@ describe('macro: textarea', () => {
     it('has data attribute which references the character limit component', () => {
       const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT));
 
-      expect($('.ons-input--textarea').attr('data-char-limit-ref')).toBe('example-id-lim-remaining');
+      expect($('.ons-input--textarea').attr('data-char-limit-ref')).toBe('example-id-lim');
     });
 
     it('has `aria-describedby` attribute which references the character limit component', () => {
       const $ = cheerio.load(renderComponent('textarea', EXAMPLE_TEXTAREA_WITH_CHARACTER_LIMIT));
 
-      expect($('.ons-input--textarea').attr('aria-describedby')).toBe('example-id-lim-remaining');
+      expect($('.ons-input--textarea').attr('aria-describedby')).toBe('example-id-lim');
     });
 
     it('renders character limit component', () => {

package/components/textarea/textarea.spec.js

@@ -24,7 +24,7 @@ describe('script: textarea', () => {
 
     describe('Given that the char limit helper has initialised correctly', () => {
       it('the char limit readout should be visible', async () => {
-        const hasClass = await page.$eval('#example-textarea-lim-remaining', node => node.classList.contains('ons-u-d-no'));
+        const hasClass = await page.$eval('#example-textarea-lim', node => node.classList.contains('ons-u-d-no'));
         expect(hasClass).toBe(false);
       });
     });
@@ -36,7 +36,7 @@ describe('script: textarea', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const readout = await page.$eval('#example-textarea-lim-remaining', node => node.textContent);
+          const readout = await page.$eval('#example-textarea-lim', node => node.textContent);
           expect(readout).toBe('You have 12 characters remaining');
         });
       });
@@ -47,7 +47,7 @@ describe('script: textarea', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const readout = await page.$eval('#example-textarea-lim-remaining', node => node.textContent);
+          const readout = await page.$eval('#example-textarea-lim', node => node.textContent);
           expect(readout).toBe('You have 0 characters remaining');
         });
 
@@ -57,9 +57,7 @@ describe('script: textarea', () => {
         });
 
         it('then the readout should be given limit reached classes', async () => {
-          const hasClass = await page.$eval('#example-textarea-lim-remaining', node =>
-            node.classList.contains('ons-input__limit--reached'),
-          );
+          const hasClass = await page.$eval('#example-textarea-lim', node => node.classList.contains('ons-input__limit--reached'));
           expect(hasClass).toBe(true);
         });
       });
@@ -77,7 +75,7 @@ describe('script: textarea', () => {
         });
 
         it('then the characters remaining readout reflect the number of characters remaining', async () => {
-          const readout = await page.$eval('#example-textarea-lim-remaining', node => node.textContent);
+          const readout = await page.$eval('#example-textarea-lim', node => node.textContent);
           expect(readout).toBe('You have 1 character remaining');
         });
 
@@ -87,9 +85,7 @@ describe('script: textarea', () => {
         });
 
         it('then the readout should not be given limit reached classes', async () => {
-          const hasClass = await page.$eval('#example-textarea-lim-remaining', node =>
-            node.classList.contains('ons-input__limit--reached'),
-          );
+          const hasClass = await page.$eval('#example-textarea-lim', node => node.classList.contains('ons-input__limit--reached'));
           expect(hasClass).toBe(false);
         });
       });