@ons/design-system 72.10.9 → 72.11.0

package/components/table/_macro.spec.js

@@ -55,6 +55,41 @@ describe('macro: table', () => {
         expect($('.ons-table').hasClass('another-extra-class')).toBe(true);
     });
 
+    it('renders "scrollable" container element', () => {
+        const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
+
+        expect($('.ons-table-scrollable').length).toBe(1);
+    });
+
+    it('renders "content" container element', () => {
+        const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
+
+        expect($('.ons-table-scrollable__content').length).toBe(1);
+    });
+
+    it('renders an appropriate `aria-label` attribute on the "content" container element', () => {
+        const $ = cheerio.load(
+            renderComponent('table', {
+                ...EXAMPLE_TABLE,
+                caption: 'Example table caption',
+            }),
+        );
+
+        expect($('.ons-table-scrollable__content').attr('aria-label')).toBe('Example table caption. Scrollable table');
+    });
+
+    it('renders a custom `aria-label` attribute on the "content" container element', () => {
+        const $ = cheerio.load(
+            renderComponent('table', {
+                ...EXAMPLE_TABLE,
+                caption: 'Example table caption',
+                ariaLabel: 'Special table',
+            }),
+        );
+
+        expect($('.ons-table-scrollable__content').attr('aria-label')).toBe('Example table caption. Special table');
+    });
+
     describe('header row', () => {
         it('renders header cells with expected text', () => {
             const $ = cheerio.load(renderComponent('table', EXAMPLE_TABLE));
@@ -496,50 +531,6 @@ describe('macro: table', () => {
         });
     });
 
-    describe('scrollable variant', () => {
-        const params = {
-            ...EXAMPLE_TABLE,
-            variants: ['scrollable'],
-            caption: 'Example table caption',
-        };
-
-        it('has the "scrollable" variant class', () => {
-            const $ = cheerio.load(renderComponent('table', params));
-
-            expect($('.ons-table').hasClass('ons-table--scrollable')).toBe(true);
-        });
-
-        it('renders "scrollable" container element', () => {
-            const $ = cheerio.load(renderComponent('table', params));
-
-            expect($('.ons-table-scrollable').length).toBe(1);
-            expect($('.ons-table-scrollable--on').length).toBe(1);
-        });
-
-        it('renders "content" container element', () => {
-            const $ = cheerio.load(renderComponent('table', params));
-
-            expect($('.ons-table-scrollable__content').length).toBe(1);
-        });
-
-        it('renders an appropriate `aria-label` attribute on the "content" container element', () => {
-            const $ = cheerio.load(renderComponent('table', params));
-
-            expect($('.ons-table-scrollable__content').attr('aria-label')).toBe('Example table caption. Scrollable table');
-        });
-
-        it('renders a custom `aria-label` attribute on the "content" container element', () => {
-            const $ = cheerio.load(
-                renderComponent('table', {
-                    ...params,
-                    ariaLabel: 'Special table',
-                }),
-            );
-
-            expect($('.ons-table-scrollable__content').attr('aria-label')).toBe('Example table caption. Special table');
-        });
-    });
-
     describe('sortable variant', () => {
         const params = {
             ...EXAMPLE_TABLE,

package/components/table/_table.scss

@@ -116,12 +116,6 @@
             background: var(--ons-color-grey-75);
             border-radius: 20px;
         }
-        &--on {
-            .ons-table__header,
-            .ons-table__cell {
-                white-space: nowrap;
-            }
-        }
         &__content {
             overflow: visible;
             overflow-x: auto;
@@ -134,12 +128,6 @@
                 outline: 3px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show box-shadows
                 outline-offset: 1px;
             }
-            .ons-table__header,
-            .ons-table__cell {
-                @include mq('2xs', m) {
-                    white-space: nowrap;
-                }
-            }
             .ons-table__right-shadow,
             .ons-table__left-shadow {
                 height: 100%;

package/components/table/example-table-sortable.njk

@@ -3,7 +3,7 @@
 {{
     onsTable({
         "variants": 'sortable',
-        "caption": "Javascript enhanced sortable table",
+        "caption": "JavaScript enhanced sortable table",
         "sortBy": "Sort by",
         "ariaAsc": "ascending",
         "ariaDesc": "descending",

package/components/tabs/example-tabs-details.njk

@@ -127,7 +127,7 @@
                         <p>estimates to meet this level of quality</p>
                         <p>year after year</p>
                         <p>to find out more about the dynamic</p>
-                        <p>population model visit the ons website</p>
+                        <p>population model visit the ONS website</p>
                     </div>"
                 },
                 {

package/components/textarea/_macro.njk

@@ -9,6 +9,7 @@
         {% if params.label %}
             {{
                 onsLabel({
+                    "id": params.id ~ "-label",
                     "for": params.id,
                     "text": params.label.text,
                     "description": params.label.description,

package/components/textarea/_macro.spec.js

@@ -178,6 +178,7 @@ describe('macro: textarea', () => {
         faker.renderComponent('textarea', EXAMPLE_TEXTAREA);
 
         expect(labelSpy.occurrences).toContainEqual({
+            id: 'example-id-label',
             for: 'example-id',
             text: 'Please provide some feedback',
             description: 'For example, describe any difficulties you experienced in the use of this service',

package/components/timeout-panel/timeout-panel.spec.js

@@ -137,7 +137,7 @@ describe('script: timeout panel', () => {
         });
     });
 
-    describe('when Javascript is disabled', () => {
+    describe('when JavaScript is disabled', () => {
         beforeEach(async () => {
             const expiryTime = new Date(Date.now() + 1 * 1000);
             const expiryTimeInISOFormat = new Date(expiryTime).toISOString();