@ons/design-system 67.2.0 → 69.0.0

package/components/mutually-exclusive/mutually-exclusive.number.spec.js

@@ -53,19 +53,19 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the mutually exclusive option should be checked', async () => {
-          const isChecked = await page.$eval('#currency-exclusive-option', node => node.checked);
+          const isChecked = await page.$eval('#currency-exclusive-option', (node) => node.checked);
           expect(isChecked).toBe(true);
         });
 
         it('then the number input should be cleared', async () => {
-          const inputValue = await page.$eval('#currency', node => node.value);
+          const inputValue = await page.$eval('#currency', (node) => node.value);
           expect(inputValue).toBe('');
         });
 
         it('then the aria alert should tell the user that the number input has been cleared', async () => {
           await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('Gross annual income cleared.');
         });
       });
@@ -82,14 +82,14 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the exclusive option should be unchecked', async () => {
-          const isChecked = await page.$eval('#currency-exclusive-option', node => node.checked);
+          const isChecked = await page.$eval('#currency-exclusive-option', (node) => node.checked);
           expect(isChecked).toBe(false);
         });
 
         it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
           await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('I prefer not to say deselected.');
         });
       });
@@ -104,7 +104,7 @@ describe('script: mutually-exclusive', () => {
         it('then the aria alert shouldnt say anything', async () => {
           await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('');
         });
       });
@@ -117,7 +117,7 @@ describe('script: mutually-exclusive', () => {
         it('then the aria alert shouldnt say anything', async () => {
           await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('');
         });
       });

package/components/mutually-exclusive/mutually-exclusive.textarea.spec.js

@@ -53,24 +53,24 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the mutually exclusive option should be checked', async () => {
-          const isChecked = await page.$eval('#feedback-exclusive-option', node => node.checked);
+          const isChecked = await page.$eval('#feedback-exclusive-option', (node) => node.checked);
           expect(isChecked).toBe(true);
         });
 
         it('then the textarea should be cleared', async () => {
-          const textareaValue = await page.$eval('#feedback', node => node.value);
+          const textareaValue = await page.$eval('#feedback', (node) => node.value);
           expect(textareaValue).toBe('');
         });
 
         it('then the characters remaining readout should be reset', async () => {
-          const limitText = await page.$eval('#feedback-lim', node => node.textContent);
+          const limitText = await page.$eval('#feedback-lim', (node) => node.textContent);
           expect(limitText).toBe('You have 200 characters remaining');
         });
 
         it('then the aria alert should tell the user that the textarea has been cleared', async () => {
           await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('Enter your feedback cleared.');
         });
       });
@@ -87,14 +87,14 @@ describe('script: mutually-exclusive', () => {
         });
 
         it('then the exclusive option should be unchecked', async () => {
-          const isChecked = await page.$eval('#feedback-exclusive-option', node => node.checked);
+          const isChecked = await page.$eval('#feedback-exclusive-option', (node) => node.checked);
           expect(isChecked).toBe(false);
         });
 
         it('then the aria alert should tell the user that the exclusive option has been unchecked', async () => {
           await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('I dont want to provide feedback deselected.');
         });
       });
@@ -109,7 +109,7 @@ describe('script: mutually-exclusive', () => {
         it('then the aria alert shouldnt say anything', async () => {
           await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('');
         });
       });
@@ -122,7 +122,7 @@ describe('script: mutually-exclusive', () => {
         it('then the aria alert shouldnt say anything', async () => {
           await page.waitForTimeout(SCREEN_READER_TIMEOUT_DELAY);
 
-          const alertText = await page.$eval('.ons-js-exclusive-alert', node => node.textContent);
+          const alertText = await page.$eval('.ons-js-exclusive-alert', (node) => node.textContent);
           expect(alertText).toBe('');
         });
       });

package/components/navigation/navigation.spec.js

@@ -303,5 +303,3 @@ describe('level: sub navigation', () => {
     });
   });
 });
-
-

package/components/pagination/_macro.spec.js

@@ -3,7 +3,7 @@
 import * as cheerio from 'cheerio';
 
 import axe from '../../tests/helpers/axe';
-import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+import { renderComponent } from '../../tests/helpers/rendering';
 
 const PAGINATION_PREV_NEXT_LABELS = {
   previous: 'Previous page',
@@ -70,11 +70,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 1 of 1');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 1 of 1');
     });
 
     it('has a single list item', () => {
@@ -102,11 +98,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 1 of 2');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 1 of 2');
     });
 
     it('has a 3 list items ("1", "2", "Next page")', () => {
@@ -136,11 +128,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 2 of 2');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 2');
     });
 
     it('has a 3 list items ("Previous page", "1", "2")', () => {
@@ -170,11 +158,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 2 of 3');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 3');
     });
 
     it('has a 5 list items ("Previous page", "1", "2", "3", "Next page")', () => {
@@ -206,11 +190,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 2 of 5');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 5');
     });
 
     it('has a 7 list items ("Previous page", "1", "2", "3", "4", "5", "Next page")', () => {
@@ -244,11 +224,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 2 of 6');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 2 of 6');
     });
 
     it('has 7 list items ("Previous page", "1", "2", "3", "...", "6", "Next page")', () => {
@@ -294,11 +270,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 5 of 11');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 5 of 11');
     });
 
     it('has a 9 list items ("Previous page", "1", "...", "4", "5", "6", "...", "11", "Next page")', () => {
@@ -346,11 +318,7 @@ describe('macro: pagination', () => {
     });
 
     it('renders element indicating position within pagination', () => {
-      expect(
-        $('.ons-pagination__position')
-          .text()
-          .trim(),
-      ).toBe('Page 10 of 11');
+      expect($('.ons-pagination__position').text().trim()).toBe('Page 10 of 11');
     });
 
     it('has a 7 list items ("Previous page", "1", "...", "9", "10", "11", "Next page")', () => {
@@ -371,12 +339,7 @@ function assertIsCurrentPage(pageItem, url, label, text) {
   expect(pageItem.find('.ons-pagination__link').attr('href')).toBe(url);
   expect(pageItem.find('.ons-pagination__link').attr('aria-current')).toBe('true');
   expect(pageItem.find('.ons-pagination__link').attr('aria-label')).toBe(label);
-  expect(
-    pageItem
-      .find('.ons-pagination__link')
-      .text()
-      .trim(),
-  ).toBe(text);
+  expect(pageItem.find('.ons-pagination__link').text().trim()).toBe(text);
 }
 
 function assertIsOtherPage(pageItem, url, label, text) {
@@ -384,12 +347,7 @@ function assertIsOtherPage(pageItem, url, label, text) {
   expect(pageItem.find('.ons-pagination__link').attr('href')).toBe(url);
   expect(pageItem.find('.ons-pagination__link').attr('aria-current')).toBeUndefined();
   expect(pageItem.find('.ons-pagination__link').attr('aria-label')).toBe(label);
-  expect(
-    pageItem
-      .find('.ons-pagination__link')
-      .text()
-      .trim(),
-  ).toBe(text);
+  expect(pageItem.find('.ons-pagination__link').text().trim()).toBe(text);
 }
 
 function assertIsPreviousPage(pageItem, url, label, text) {

package/components/panel/_macro.njk

@@ -4,21 +4,21 @@
         {% set classes = ' ' + params.classes %}
     {% endif %}
 
-    {% if params is not defined or params.title is not defined and params.type != "bare" %}
+    {% if params.title is not defined and params.variant != "bare" %}
         {% set noTitleClass = ' ons-panel--no-title' %}
     {% endif %}
 
-    {% if params.type %}
-        {% set typeClass = ' ons-panel--' + params.type %}
+    {% if params.variant %}
+        {% set variantClass = ' ons-panel--' + params.variant %}
     {% else %}
-        {% set typeClass = ' ons-panel--info' %}
+        {% set variantClass = ' ons-panel--info' %}
     {% endif %}
 
-    {% if params.type == "warn-branded" %}
+    {% if params.variant == "warn-branded" %}
         {% set containerClass = 'ons-branded-warning' %}
     {% endif %}
 
-    {% if params.type == "announcement" %}
+    {% if params.variant == "announcement" %}
         {% set containerClass = 'ons-announcement' %}
     {% endif %}
 
@@ -26,19 +26,19 @@
         {% set spaciousClass = ' ons-panel--spacious' %}
     {% endif %}
 
-    {% if params.type == "warn-branded" or params.type == "announcement" %}
+    {% if params.variant == "warn-branded" or params.variant == "announcement" %}
         <div class="{{containerClass}}">
             <div class="ons-container">
     {% endif %}
 
-        <div {% if (params.type == 'error' and params.title) or params.type == 'success' %}aria-labelledby="alert" role="alert" tabindex="-1" {% if not isDesignSystemExample %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ typeClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params and params.attributes %}{% for attribute, value in (params.attributes.items() if params and params.attributes is mapping and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params and params.id %} id="{{params.id}}"{% endif %}>
+        <div {% if (params.variant == 'error' and params.title) or params.variant == 'success' %}aria-labelledby="alert" role="alert" tabindex="-1" {% if not isDesignSystemExample %}autofocus="autofocus" {% endif %}{% endif %}class="ons-panel{{ variantClass }}{{ iconClass }}{{ noTitleClass }}{{ spaciousClass }}{{ classes }}"{% if params and params.attributes %}{% for attribute, value in (params.attributes.items() if params and params.attributes is mapping and params.attributes.items else params.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}{% if params and params.id %} id="{{params.id}}"{% endif %}>
 
-            {% if params.type == "warn" or params.type == "warn-branded" %}
+            {% if params.variant == "warn" or params.variant == "warn-branded" %}
                 <span class="ons-panel__icon" aria-hidden="true">!</span>
                 <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Warning: ") }}</span>
             {% endif %}
 
-            {% if params.type == "announcement" %}
+            {% if params.variant == "announcement" %}
                 {% from "components/icon/_macro.njk" import onsIcon %}
                 <span class="ons-panel__icon" aria-hidden="true">
                     {{-
@@ -51,21 +51,21 @@
             {% endif %}
 
             {% if params.title %}
-                {% if params.type == 'error' %}
+                {% if params.variant == 'error' %}
                     {% set defaultTitleTag = "h2" %}
                 {% else %}
                     {% set defaultTitleTag = "div" %}
                 {% endif %}
                 {% set titleTag = params.titleTag | default(defaultTitleTag) %}
                 <div class="ons-panel__header">
-                    <{{ titleTag }} id="alert"{% if params.type %} data-qa="{{ params.type }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
+                    <{{ titleTag }} id="alert"{% if params.variant %} data-qa="{{ params.variant }}-header"{% endif %} class="ons-panel__title ons-u-fs-r--b">{{ params.title | safe }}</{{ titleTag }}>
                 </div>
             {% else %}
-                {% if not params.type or params.type == "branded" or params.type == "info" or params.type == "bare" %}
+                {% if not params.variant or params.variant == "branded" or params.variant == "info" or params.variant == "bare" %}
                     <span class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default("Important information: ") }}</span>
-                {% elif params.type == 'error' or params.type == 'success' %} 
-                    {% set defaultText = "Completed" if params.type == "success" else "Error" %}
-                    <span{% if params.type == "success" %} id="alert"{% endif %} class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default(defaultText ~ ": ") }}</span>
+                {% elif params.variant == 'error' or params.variant == 'success' %} 
+                    {% set defaultText = "Completed" if params.variant == "success" else "Error" %}
+                    <span{% if params.variant == "success" %} id="alert"{% endif %} class="ons-panel__assistive-text ons-u-vh">{{ params.assistiveTextPrefix | default(defaultText ~ ": ") }}</span>
                 {% endif %}
             {% endif %}
 
@@ -86,7 +86,7 @@
             </div>
         </div>
 
-    {% if params.type == "warn-branded" or params.type == "announcement"  %}
+    {% if params.variant == "warn-branded" or params.variant == "announcement"  %}
             </div>
         </div>
     {% endif %}

package/components/panel/_macro.spec.js

@@ -20,12 +20,12 @@ describe('macro: panel', () => {
     ['branded', 'Important information:'],
     ['success', 'Completed:'],
     ['announcement', 'Announcement:'],
-  ])('mode: %s', (panelType, accessibleText) => {
+  ])('mode: %s', (panelVariant, accessibleText) => {
     it('passes jest-axe checks', async () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
         }),
       );
       const results = await axe($.html());
@@ -36,18 +36,18 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
-      expect($('.ons-panel').hasClass(`ons-panel--${panelType}`)).toBe(true);
+      expect($('.ons-panel').hasClass(`ons-panel--${panelVariant}`)).toBe(true);
     });
 
     it('has the provided `body` text', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -55,7 +55,7 @@ describe('macro: panel', () => {
     });
 
     it('calls with content', () => {
-      const $ = cheerio.load(renderComponent('panel', { EXAMPLE_PANEL_BASIC, type: panelType }, 'Example content...'));
+      const $ = cheerio.load(renderComponent('panel', { EXAMPLE_PANEL_BASIC, variant: panelVariant }, 'Example content...'));
 
       const content = $('.ons-panel__body').text().trim();
       expect(content).toBe('Example content...');
@@ -65,7 +65,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -76,7 +76,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
           classes: 'ons-custom-class',
         }),
       );
@@ -88,7 +88,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
           attributes: {
             a: '123',
             b: '456',
@@ -103,7 +103,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -114,7 +114,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -125,7 +125,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: panelType,
+          variant: panelVariant,
           assistiveTextPrefix: 'Some helpful text:',
         }),
       );
@@ -176,13 +176,13 @@ describe('macro: panel', () => {
   describe.each([
     ['error', 'h2'],
     ['success', 'div'],
-  ])('mode: %s', (panelType, tagEl) => {
+  ])('mode: %s', (panelVariant, tagEl) => {
     it('has the default id set', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
           title: 'Title',
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -194,7 +194,7 @@ describe('macro: panel', () => {
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
           title: 'Title',
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -207,7 +207,7 @@ describe('macro: panel', () => {
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
           title: 'Title',
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -219,7 +219,7 @@ describe('macro: panel', () => {
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
           title: 'Title',
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -231,7 +231,7 @@ describe('macro: panel', () => {
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
           title: 'Title',
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -243,7 +243,7 @@ describe('macro: panel', () => {
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
           title: 'Title',
-          type: panelType,
+          variant: panelVariant,
         }),
       );
 
@@ -259,7 +259,7 @@ describe('macro: panel', () => {
           {
             ...EXAMPLE_PANEL_BASIC,
             title: 'Title',
-            type: panelType,
+            variant: panelVariant,
           },
           null,
           null,
@@ -289,7 +289,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: 'announcement',
+          variant: 'announcement',
         }),
       );
 
@@ -303,7 +303,7 @@ describe('macro: panel', () => {
 
       faker.renderComponent('panel', {
         ...EXAMPLE_PANEL_BASIC,
-        type: 'announcement',
+        variant: 'announcement',
       });
 
       expect(iconsSpy.occurrences[0].iconType).toBe('arrow-forward');
@@ -315,7 +315,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: 'warn',
+          variant: 'warn',
         }),
       );
 
@@ -328,7 +328,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: 'warn-branded',
+          variant: 'warn-branded',
         }),
       );
 
@@ -340,7 +340,7 @@ describe('macro: panel', () => {
       const $ = cheerio.load(
         renderComponent('panel', {
           ...EXAMPLE_PANEL_BASIC,
-          type: 'warn-branded',
+          variant: 'warn-branded',
         }),
       );
 

package/components/panel/_panel.scss

@@ -1,4 +1,4 @@
-@mixin panel-type($name, $color, $color-bg) {
+@mixin panel-variant($name, $color, $color-bg) {
   .ons-panel {
     &--#{$name} {
       background: $color-bg;
@@ -144,7 +144,8 @@
 
   &--announcement {
     a:focus {
-      box-shadow: 0 -2px var(--ons-color-focus), 0 4px (--ons-color-text-inverse-link) !important; // Override focus style because the black border is not visible on a black background
+      box-shadow: 0 -2px var(--ons-color-focus),
+        0 4px (--ons-color-text-inverse-link) !important; // Override focus style because the black border is not visible on a black background
     }
   }
 
@@ -249,10 +250,10 @@
   }
 }
 
-@include panel-type(error, var(--ons-color-errors), var(--ons-color-errors-tint));
-@include panel-type(success, var(--ons-color-success), var(--ons-color-success-tint));
-@include panel-type(info, var(--ons-color-info), var(--ons-color-info-tint));
-@include panel-type(branded, var(--ons-color-branded), var(--ons-color-branded-tint));
-@include panel-type(warn, transparent, transparent);
-@include panel-type(warn-branded, var(--ons-color-branded-tertiary), var(--ons-color-branded-tertiary));
-@include panel-type(announcement, var(--ons-color-black), var(--ons-color-black));
+@include panel-variant(error, var(--ons-color-errors), var(--ons-color-errors-tint));
+@include panel-variant(success, var(--ons-color-success), var(--ons-color-success-tint));
+@include panel-variant(info, var(--ons-color-info), var(--ons-color-info-tint));
+@include panel-variant(branded, var(--ons-color-branded), var(--ons-color-branded-tint));
+@include panel-variant(warn, transparent, transparent);
+@include panel-variant(warn-branded, var(--ons-color-branded-tertiary), var(--ons-color-branded-tertiary));
+@include panel-variant(announcement, var(--ons-color-black), var(--ons-color-black));

package/components/panel/example-panel-bare.njk

@@ -1,9 +1,8 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
 
 {% call onsPanel({
-        "type": 'bare',
-        "iconType": 'lock'
-    })
-%}
+    "variant": 'bare',
+    "iconType": 'lock'
+}) %}
     Here is some text with an icon
 {% endcall %}

package/components/panel/example-panel-with-announcement.njk

@@ -1,18 +1,14 @@
 ---
-
 "fullWidth": true
 ---
 {% from "components/panel/_macro.njk" import onsPanel %}
 
 {% call onsPanel({
-        "type": 'announcement'
-    })
-%}
-
-<p class="ons-u-mb-no">National lockdown: stay at home</p>
-
-<div class="ons-u-fs-r">
-    <p>Coronavirus (COVID-19) remains a serious threat across the country. <a href="#0">Find out more</a></p>
-</div>
+    "variant": 'announcement'
+}) %}
+    <p class="ons-u-mb-no">National lockdown: stay at home</p>
 
+    <div class="ons-u-fs-r">
+        <p>Coronavirus (COVID-19) remains a serious threat across the country. <a href="#0">Find out more</a></p>
+    </div>
 {% endcall %}

package/components/panel/example-panel-with-error-summary.njk

@@ -2,8 +2,8 @@
 {% from "components/list/_macro.njk" import onsList %}
 
 {% call onsPanel({
-        "title": 'There are 2 problems with your answer',
-        "type": 'error'
+    "title": 'There are 2 problems with your answer',
+    "variant": 'error'
 }) %}
     {{
         onsList({

package/components/panel/example-panel-with-information.njk

@@ -1,5 +1,4 @@
 {% from "components/panel/_macro.njk" import onsPanel %}
-
 {{
     onsPanel({
         "body": '<p>Include all rooms built or converted for use as bedrooms</p>'