@ons/design-system 60.0.0 → 60.0.2

package/components/pagination/_pagination.scss

@@ -2,7 +2,9 @@ $pagination-item-padding: 0.5rem;
 $pagination-item-width: 2.5rem;
 
 .ons-pagination {
-  $ctx: &;
+  &__position {
+    margin: 0 0 0.4rem;
+  }
 
   &__items {
     margin: 0 $pagination-item-padding * -1;
@@ -25,6 +27,12 @@ $pagination-item-width: 2.5rem;
     }
   }
 
+  &__items > & {
+    &__item--current {
+      margin: 0 0 0 $pagination-item-padding;
+    }
+  }
+
   &__item,
   &__link {
     height: $pagination-item-width;
@@ -43,7 +51,7 @@ $pagination-item-width: 2.5rem;
   }
 
   &__item--current &__link {
-    background: var(--ons-color-text-link-hover);
+    background: var(--ons-color-text-link-active);
     color: var(--ons-color-white);
     outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show backgrounds
     text-decoration: none;

package/components/radios/_macro.njk

@@ -53,8 +53,7 @@
                                             "id": radio.other.id,
                                             "name": radio.other.name,
                                             "type": radio.other.type,
-                                            "required": radio.other.required,
-                                            "classes": ("ons-input--error " if params.error else "") + radio.other.classes | default(''),
+                                            "classes": ("ons-input--error " if params.error and radio.checked else "") + radio.other.classes | default(''),
                                             "width": radio.other.width | default('auto'),
                                             "attributes": radio.other.attributes,
                                             "label": {
@@ -73,7 +72,7 @@
                                             "id": radio.other.id,
                                             "name": radio.other.name,
                                             "options": radio.other.options,
-                                            "classes": ("ons-input--error " if params.error else "") + radio.other.classes | default(''),
+                                            "classes": ("ons-input--error " if params.error and radio.checked else "") + radio.other.classes | default(''),
                                             "label": {
                                                 "id": radio.other.id + "-label",
                                                 "text": radio.other.label.text,

package/components/radios/_macro.spec.js

@@ -35,7 +35,6 @@ const EXAMPLE_RADIO_ITEM_INPUT = {
     label: {
       text: 'Enter your own answer',
     },
-    required: false,
     classes: 'extra-textbox-class',
     width: 42,
     value: '42',
@@ -462,7 +461,6 @@ describe('macro: radios', () => {
           text: 'Enter your own answer',
           classes: 'ons-u-fw-n',
         },
-        required: false,
         classes: 'extra-textbox-class',
         width: 42,
         attributes: EXAMPLE_RADIO_ITEM_INPUT.other.attributes,

package/components/summary/_summary.scss

@@ -93,8 +93,8 @@ $hub-row-spacing: 1.3rem;
   &__spacer {
     background: var(--ons-color-black);
     display: inline-block;
-    height: 1rem;
-    margin: 0 0.25rem;
+    height: 1.15rem;
+    margin: 0.18rem 0.25rem 0;
     vertical-align: middle;
     width: 1px;
   }

package/components/tabs/tabs.js

@@ -81,8 +81,9 @@ export default class Tabs {
       this.hideTab(tab);
     });
 
-    if (!this.noInitialActiveTab) {
-      const activeTab = this.getTab(window.location.hash) || this.tabs[0];
+    const hashTab = this.getTab(window.location.hash);
+    if (!this.noInitialActiveTab || !!hashTab) {
+      const activeTab = hashTab || this.tabs[0];
       this.showTab(activeTab);
     }
 

package/components/tabs/tabs.spec.js

@@ -138,6 +138,39 @@ describe('script: tabs', () => {
     });
   });
 
+  describe('when a hash for a tab is in the url', () => {
+    beforeEach(async () => {
+      await setViewport(page, { width: 1650, height: 1050 });
+      await setTestPage('/test#tab.id.2', renderComponent('tabs', EXAMPLE_TABS));
+    });
+
+    it('is assigned a "tabindex" value', async () => {
+      const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
+
+      expect(tabIndexValues).toEqual(['-1', '0', '-1']);
+    });
+
+    it('has the "aria-selected" attribute', async () => {
+      const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', node => node.getAttribute('aria-selected'));
+
+      expect(ariaSelectedValue).toBe('true');
+    });
+
+    it('has the "ons-tab--selected" class assigned', async () => {
+      const hasClass = await page.$eval('a[href="#tab.id.2"]', node => node.classList.contains('ons-tab--selected'));
+
+      expect(hasClass).toBe(true);
+    });
+
+    it('shows the corresponding panel', async () => {
+      const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
+        nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
+      );
+
+      expect(panelHiddenStates).toEqual([true, false, true]);
+    });
+  });
+
   describe('when the viewport is small', () => {
     beforeEach(async () => {
       await page.emulate(puppeteer.devices['iPhone X']);
@@ -168,7 +201,7 @@ describe('script: tabs', () => {
     });
   });
 
-  describe('when `data-no-initial-active-tab` is not present', () => {
+  describe('when `data-no-initial-active-tab` is present', () => {
     beforeEach(async () => {
       await setViewport(page, { width: 1650, height: 1050 });
       await setTestPage('/test', renderComponent('tabs', EXAMPLE_TABS_WITH_NO_INITIAL_ACTIVE_TAB));
@@ -253,4 +286,37 @@ describe('script: tabs', () => {
       });
     });
   });
+
+  describe('when a hash for a tab is in the url and `data-no-initial-active-tab` is present', () => {
+    beforeEach(async () => {
+      await setViewport(page, { width: 1650, height: 1050 });
+      await setTestPage('/test#tab.id.2', renderComponent('tabs', EXAMPLE_TABS_WITH_NO_INITIAL_ACTIVE_TAB));
+    });
+
+    it('is assigned a "tabindex" value', async () => {
+      const tabIndexValues = await page.$$eval('.ons-tab', nodes => nodes.map(node => node.getAttribute('tabindex')));
+
+      expect(tabIndexValues).toEqual(['-1', '0', '-1']);
+    });
+
+    it('has the "aria-selected" attribute', async () => {
+      const ariaSelectedValue = await page.$eval('a[href="#tab.id.2"]', node => node.getAttribute('aria-selected'));
+
+      expect(ariaSelectedValue).toBe('true');
+    });
+
+    it('has the "ons-tab--selected" class assigned', async () => {
+      const hasClass = await page.$eval('a[href="#tab.id.2"]', node => node.classList.contains('ons-tab--selected'));
+
+      expect(hasClass).toBe(true);
+    });
+
+    it('shows the corresponding panel', async () => {
+      const panelHiddenStates = await page.$$eval('.ons-tabs__panel', nodes =>
+        nodes.map(node => node.classList.contains('ons-tabs__panel--hidden')),
+      );
+
+      expect(panelHiddenStates).toEqual([true, false, true]);
+    });
+  });
 });