@ons/design-system 50.0.1 → 53.0.0

package/components/phase-banner/_macro.spec.js

@@ -0,0 +1,73 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_PHASE_BANNER_MINIMAL = {
+  html: 'Example content with a <a href="#">link</a>',
+};
+
+describe('macro: phase-banner', () => {
+  it('passes jest-axe checks with', async () => {
+    const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has expected html content', () => {
+    const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
+
+    const htmlContent = $('.ons-phase-banner__desc')
+      .html()
+      .trim();
+    expect(htmlContent).toBe('Example content with a <a href="#">link</a>');
+  });
+
+  it('has the "Beta" badge by default', () => {
+    const $ = cheerio.load(renderComponent('phase-banner', EXAMPLE_PHASE_BANNER_MINIMAL));
+
+    const badgeText = $('.ons-phase-banner__badge')
+      .text()
+      .trim();
+    expect(badgeText).toBe('Beta');
+  });
+
+  it('has the provided `badge` text', () => {
+    const $ = cheerio.load(
+      renderComponent('phase-banner', {
+        ...EXAMPLE_PHASE_BANNER_MINIMAL,
+        badge: 'Alpha',
+      }),
+    );
+
+    const badgeText = $('.ons-phase-banner__badge')
+      .text()
+      .trim();
+    expect(badgeText).toBe('Alpha');
+  });
+
+  it('has no badge when `hideBadge` is true', () => {
+    const $ = cheerio.load(
+      renderComponent('phase-banner', {
+        ...EXAMPLE_PHASE_BANNER_MINIMAL,
+        hideBadge: true,
+      }),
+    );
+
+    expect($('.ons-phase-banner__badge').length).toBe(0);
+  });
+
+  it('has `container--wide` class when `wide` is true', () => {
+    const $ = cheerio.load(
+      renderComponent('phase-banner', {
+        ...EXAMPLE_PHASE_BANNER_MINIMAL,
+        wide: true,
+      }),
+    );
+
+    expect($('.ons-container').hasClass('ons-container--wide')).toBe(true);
+  });
+});

package/components/promotional-banner/_macro.spec.js

@@ -0,0 +1,97 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent } from '../../tests/helpers/rendering';
+
+const EXAMPLE_PROMOTIONAL_BANNER_MINIMAL = {
+  content: 'Example content with a <a href="#">link</a>',
+};
+
+const EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_URL = {
+  content: 'Example content with a <a href="#">link</a>',
+  image: {
+    src: 'example.png',
+    alt: 'Example image',
+  },
+};
+
+const EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_IMAGE = {
+  content: 'Example content with a <a href="#">link</a>',
+  image: {
+    smallSrc: 'example-small.png',
+    largeSrc: 'example-large.png',
+    alt: 'Example image',
+  },
+};
+
+describe('macro: promotional-banner', () => {
+  describe.each([
+    ['without image', EXAMPLE_PROMOTIONAL_BANNER_MINIMAL],
+    ['with image url', EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_URL],
+    ['with image small/large source', EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_IMAGE],
+  ])('mode: %s', (_, params) => {
+    it('passes jest-axe checks with', async () => {
+      const $ = cheerio.load(renderComponent('promotional-banner', params));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+
+    it('has expected html content', () => {
+      const $ = cheerio.load(renderComponent('promotional-banner', params));
+
+      const htmlContent = $('.ons-promo-banner__content')
+        .html()
+        .trim();
+      expect(htmlContent).toBe('Example content with a <a href="#">link</a>');
+    });
+
+    it('has expected html content when called', () => {
+      const $ = cheerio.load(renderComponent('promotional-banner', params, ['<p>Nested content</p>']));
+
+      const htmlContent = $('.ons-promo-banner__content').html();
+      expect(htmlContent).toContain('<p>Nested content</p>');
+    });
+  });
+
+  describe('mode: with image url', () => {
+    it('has expected `src` attribute', () => {
+      const $ = cheerio.load(renderComponent('promotional-banner', EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_URL));
+
+      const src = $('.ons-promo-banner__image img').attr('src');
+      expect(src).toBe('example.png');
+    });
+
+    it('has expected `alt` attribute', () => {
+      const $ = cheerio.load(renderComponent('promotional-banner', EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_URL));
+
+      const alt = $('.ons-promo-banner__image img').attr('alt');
+      expect(alt).toBe('Example image');
+    });
+  });
+
+  describe('mode: with image small/large source', () => {
+    it('has expected `srcset` attribute', () => {
+      const $ = cheerio.load(renderComponent('promotional-banner', EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_IMAGE));
+
+      const srcset = $('.ons-promo-banner__image img').attr('srcset');
+      expect(srcset).toBe('example-small.png 1x, example-large.png 2x');
+    });
+
+    it('has expected `src` attribute', () => {
+      const $ = cheerio.load(renderComponent('promotional-banner', EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_IMAGE));
+
+      const src = $('.ons-promo-banner__image img').attr('src');
+      expect(src).toBe('example-small.png');
+    });
+
+    it('has expected `alt` attribute', () => {
+      const $ = cheerio.load(renderComponent('promotional-banner', EXAMPLE_PROMOTIONAL_BANNER_WITH_IMAGE_IMAGE));
+
+      const alt = $('.ons-promo-banner__image img').attr('alt');
+      expect(alt).toBe('Example image');
+    });
+  });
+});

package/components/question/_macro.njk

@@ -1,21 +1,16 @@
 {% macro onsQuestion(params) %}
 
-    {% set titleHtml %}
-        {%- if params.readDescriptionFirst is defined and params.readDescriptionFirst == true and params.description is defined and params.description %}
-            <div class="ons-question__description ons-u-vh">{{- params.description | safe -}}</div>
-        {% endif -%}
-        {{- params.title | safe -}}
-    {% endset %}
+    {%- set titleHtml -%}{% if params.readDescriptionFirst is defined and params.readDescriptionFirst == true and params.description is defined and params.description %}
+            <div class="ons-question__description ons-u-vh">{{ params.description | safe }} </div>{% endif %}{{- params.title | safe -}}
+    {%- endset -%}
 
-    {% set descHtml %}
-        {% if params.readDescriptionFirst is defined and params.readDescriptionFirst == true %}
-            <div aria-hidden="true" {% if params.legendIsQuestionTitle is not defined %}class="ons-question__description"{% endif %}>{{ params.description | safe }}</div>
+    {%- set descHtml -%}{% if params.readDescriptionFirst is defined and params.readDescriptionFirst == true %}
+            <div aria-hidden="true" {% if params.legendIsQuestionTitle is not defined %}class="ons-question__description ons-question__description--aria-hidden"{% endif %}>{{- params.description | safe -}}</div>
         {% elif params.legendIsQuestionTitle is not defined %}
-            <div class="ons-question__description ons-u-mb-m">{{ params.description | safe }}</div>
+            <div class="ons-question__description ons-u-mb-m">{{- params.description | safe -}}</div>
         {% else %}
-            {{ params.description | safe }}
-        {% endif %}
-    {% endset %}
+            {{- params.description | safe -}}
+        {% endif %}{%- endset -%}
 
     {% set instHtml %}
         <div class="ons-question__instruction ons-u-mb-m">{{ params.instruction | safe }}</div>
@@ -25,9 +20,9 @@
         {% set questionDefinition %}
             {% from "components/collapsible/_macro.njk" import onsCollapsible %}
             {% call onsCollapsible({
-                "id": params.definition.id if params.definition.id is defined and params.definition.id else '',
+                "id": params.definition.id,
                 "classes": 'ons-u-mb-m',
-                "title": params.definition.title if params.definition.title is defined and params.definition.title else ''
+                "title": params.definition.title
             }) %}
                 {% if params.definition.content %}
                     {{ params.definition.content | safe }}
@@ -40,7 +35,7 @@
         {% set questionGuidance %}
             {% from "components/panel/_macro.njk" import onsPanel %}
             {% call onsPanel({
-                "classes": "ons-u-mb-m"
+                "classes": "ons-question-guidance ons-u-mb-m"
             }) %}
                 {% if params.guidance.content is defined and params.guidance.content %}
                     {{ params.guidance.content | safe }}
@@ -48,10 +43,10 @@
                 {% if params.guidance.lists is defined and params.guidance.lists %}
                     {%- for item in params.guidance.lists -%}
                         {% if item.listHeading is defined and item.listHeading %}
-                            <h2 class="ons-u-fs-r--b">{{ item.listHeading }}</h2>
+                            <h2 class="ons-question-guidance__list-heading ons-u-fs-r--b">{{ item.listHeading }}</h2>
                         {% endif %}
                         {% if item.listLeadingLine is defined and item.listLeadingLine %}
-                            <p>{{ item.listLeadingLine }}</h2>
+                            <p class="ons-question-guidance__list-leading-line">{{ item.listLeadingLine }}</p>
                         {% endif %}
                         {% from "components/lists/_macro.njk" import onsList %}
                         {{
@@ -74,7 +69,7 @@
             {% from "components/fieldset/_macro.njk" import onsFieldset %}
 
             {# Resolves caller issue in jijna: https://github.com/pallets/jinja/issues/371 #}
-            {% set content = caller() %}
+            {% set content = caller() if caller %}
             <div class="ons-question__answer ons-u-mb-m">
                 {% call onsFieldset({
                     "legendIsQuestionTitle": params.legendIsQuestionTitle,
@@ -109,7 +104,7 @@
             {% endif %}
 
             <div class="ons-question__answer ons-u-mb-m">
-                {{ caller () }}
+                {{ caller() if caller }}
             </div>
         {% endif %}
 
@@ -125,9 +120,8 @@
         {% endif %}
     </div>
 
-    {% if params.submitButton is defined and params.submitButton %}
+    {% if params.submitButton != (false or null) %}
         {% from "components/button/_macro.njk" import onsButton %}
-
         {{
             onsButton({
                 "id": params.submitButton.id,

package/components/question/_macro.spec.js

@@ -0,0 +1,309 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+const EXAMPLE_QUESTION_BASIC = {
+  id: 'example-question',
+  title: 'Question title',
+  description: 'Question description',
+};
+
+const EXAMPLE_QUESTION_DEFINITION = {
+  ...EXAMPLE_QUESTION_BASIC,
+  definition: {
+    id: 'definition-id',
+    title: 'Definition title',
+    content: '<p>Definition content</p>',
+  },
+};
+
+const EXAMPLE_QUESTION_GUIDANCE = {
+  ...EXAMPLE_QUESTION_BASIC,
+  guidance: {
+    content: '<span class="fake-content">Guidance content</span>',
+    lists: [
+      {
+        listHeading: 'List heading 1',
+        listLeadingLine: 'List leading line 1',
+        itemsList: [{ text: 'Test item 1' }, { text: 'Test item 2' }],
+      },
+    ],
+  },
+};
+
+const EXAMPLE_QUESTION_JUSTIFICATION = {
+  ...EXAMPLE_QUESTION_BASIC,
+  justification: {
+    id: 'justification-id',
+    title: 'Justification title',
+    content: '<p>Justification content</p>',
+  },
+};
+
+const EXAMPLE_QUESTION_BUTTON = {
+  ...EXAMPLE_QUESTION_BASIC,
+  submitButton: {
+    id: 'button-id',
+    submitType: 'button',
+    text: 'Button text',
+  },
+};
+
+const EXAMPLE_QUESTION_INSTRUCTION = {
+  ...EXAMPLE_QUESTION_BASIC,
+  instruction: 'Instruction text',
+};
+
+const EXAMPLE_QUESTION_LEGENDISQUESTIONTITLE = {
+  ...EXAMPLE_QUESTION_BASIC,
+  legendIsQuestionTitle: true,
+};
+
+const EXAMPLE_QUESTION_DESCRIPTION_FIRST = {
+  ...EXAMPLE_QUESTION_BASIC,
+  readDescriptionFirst: true,
+};
+
+describe('macro: question', () => {
+  describe.each([
+    ['with basic parameters', EXAMPLE_QUESTION_BASIC],
+    ['with definition', EXAMPLE_QUESTION_DEFINITION],
+    ['with guidance', EXAMPLE_QUESTION_GUIDANCE],
+    ['with justification', EXAMPLE_QUESTION_JUSTIFICATION],
+    ['with button', EXAMPLE_QUESTION_BUTTON],
+    ['with instruction', EXAMPLE_QUESTION_INSTRUCTION],
+    ['with `legendIsQuestionTitle`', EXAMPLE_QUESTION_LEGENDISQUESTIONTITLE],
+    ['with `readDescriptionFirst`', EXAMPLE_QUESTION_DESCRIPTION_FIRST],
+    [
+      'with all options combined',
+      {
+        ...EXAMPLE_QUESTION_DEFINITION,
+        ...EXAMPLE_QUESTION_GUIDANCE,
+        ...EXAMPLE_QUESTION_JUSTIFICATION,
+        ...EXAMPLE_QUESTION_BUTTON,
+        ...EXAMPLE_QUESTION_INSTRUCTION,
+        ...EXAMPLE_QUESTION_LEGENDISQUESTIONTITLE,
+        ...EXAMPLE_QUESTION_DESCRIPTION_FIRST,
+      },
+    ],
+  ])('mode: %s', (_, params) => {
+    it('passes jest-axe checks with', async () => {
+      const $ = cheerio.load(renderComponent('question', params));
+
+      const results = await axe($.html());
+      expect(results).toHaveNoViolations();
+    });
+  });
+
+  describe('mode: with basic parameters', () => {
+    it('has the `title` text', () => {
+      const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_BASIC));
+
+      expect(
+        $('.ons-question__title')
+          .text()
+          .trim(),
+      ).toBe('Question title');
+    });
+
+    it('has the provided `id` attribute', () => {
+      const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_BASIC));
+
+      expect($('.ons-question').attr('id')).toBe('example-question');
+    });
+
+    it('has additionally provided `attributes`', () => {
+      const $ = cheerio.load(
+        renderComponent('question', {
+          ...EXAMPLE_QUESTION_BASIC,
+          attributes: {
+            a: 123,
+            b: 456,
+          },
+        }),
+      );
+
+      expect($('.ons-question').attr('a')).toBe('123');
+      expect($('.ons-question').attr('b')).toBe('456');
+    });
+
+    it('has additionally provided style classes', () => {
+      const $ = cheerio.load(
+        renderComponent('question', {
+          ...EXAMPLE_QUESTION_BASIC,
+          classes: 'extra-class another-extra-class',
+        }),
+      );
+
+      expect($('.ons-question').hasClass('extra-class')).toBe(true);
+      expect($('.ons-question').hasClass('another-extra-class')).toBe(true);
+    });
+
+    it('has the `description` text', () => {
+      const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_BASIC));
+
+      expect(
+        $('.ons-question__description')
+          .text()
+          .trim(),
+      ).toBe('Question description');
+    });
+
+    it('calls with content', () => {
+      const $ = cheerio.load(renderComponent('question', { EXAMPLE_QUESTION_BASIC }, 'Example content...'));
+
+      const content = $('.ons-question__answer')
+        .text()
+        .trim();
+      expect(content).toEqual(expect.stringContaining('Example content...'));
+    });
+  });
+
+  describe('mode: with definition', () => {
+    it('outputs the expected collapsible', () => {
+      const faker = templateFaker();
+      const collapsibleSpy = faker.spy('collapsible');
+
+      faker.renderComponent('question', EXAMPLE_QUESTION_DEFINITION);
+
+      expect(collapsibleSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mb-m');
+      expect(collapsibleSpy.occurrences[0]).toHaveProperty('id', 'definition-id');
+      expect(collapsibleSpy.occurrences[0]).toHaveProperty('title', 'Definition title');
+    });
+
+    it('outputs the expected collapsible call content', () => {
+      const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_DEFINITION));
+
+      expect($('.ons-collapsible__content > p').text()).toBe('Definition content');
+    });
+  });
+
+  describe('mode: with guidance', () => {
+    it('outputs the expected panel', () => {
+      const faker = templateFaker();
+      const panelSpy = faker.spy('panel');
+
+      faker.renderComponent('question', EXAMPLE_QUESTION_GUIDANCE);
+
+      expect(panelSpy.occurrences[0]).toHaveProperty('classes', 'ons-question-guidance ons-u-mb-m');
+    });
+
+    it('outputs the expected panel call content', () => {
+      const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_GUIDANCE));
+
+      expect($('.ons-panel__body .fake-content').text()).toBe('Guidance content');
+    });
+
+    it('outputs the expected `listHeading`', () => {
+      const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_GUIDANCE));
+
+      expect($('.ons-question-guidance__list-heading').text()).toBe('List heading 1');
+    });
+
+    it('outputs the expected `listLeadingLine`', () => {
+      const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_GUIDANCE));
+
+      expect($('.ons-question-guidance__list-leading-line').text()).toBe('List leading line 1');
+    });
+
+    it('outputs the expected list', () => {
+      const faker = templateFaker();
+      const listSpy = faker.spy('lists');
+
+      faker.renderComponent('question', EXAMPLE_QUESTION_GUIDANCE);
+
+      expect(listSpy.occurrences[0].itemsList).toEqual([
+        {
+          text: 'Test item 1',
+        },
+        {
+          text: 'Test item 2',
+        },
+      ]);
+    });
+  });
+
+  describe('mode: with justification', () => {
+    it('outputs the expected collapsible', () => {
+      const faker = templateFaker();
+      const collapsibleSpy = faker.spy('collapsible');
+
+      faker.renderComponent('question', EXAMPLE_QUESTION_JUSTIFICATION);
+
+      expect(collapsibleSpy.occurrences[0]).toHaveProperty('classes', 'ons-u-mb-m');
+      expect(collapsibleSpy.occurrences[0]).toHaveProperty('id', 'justification-id');
+      expect(collapsibleSpy.occurrences[0]).toHaveProperty('title', 'Justification title');
+    });
+
+    it('outputs the expected collapsible call content', () => {
+      const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_JUSTIFICATION));
+
+      expect($('.ons-collapsible__content > p').text()).toBe('Justification content');
+    });
+  });
+
+  describe('mode: with button', () => {
+    it('outputs the expected button', () => {
+      const faker = templateFaker();
+      const buttonSpy = faker.spy('button');
+
+      faker.renderComponent('question', EXAMPLE_QUESTION_BUTTON);
+
+      expect(buttonSpy.occurrences[0]).toHaveProperty('submitType', 'button');
+      expect(buttonSpy.occurrences[0]).toHaveProperty('id', 'button-id');
+      expect(buttonSpy.occurrences[0]).toHaveProperty('text', 'Button text');
+    });
+  });
+
+  describe('mode: with instruction', () => {
+    it('has the instruction text', () => {
+      const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_INSTRUCTION));
+
+      expect($('.ons-question__instruction').text()).toBe('Instruction text');
+    });
+  });
+
+  describe('mode: with `legendIsQuestionTitle`', () => {
+    it('has the expected `fieldset` output', () => {
+      const faker = templateFaker();
+      const fieldsetSpy = faker.spy('fieldset');
+
+      faker.renderComponent('question', EXAMPLE_QUESTION_LEGENDISQUESTIONTITLE);
+
+      expect(fieldsetSpy.occurrences[0]).toEqual({
+        legendIsQuestionTitle: true,
+        legend: 'Question title',
+        description: 'Question description',
+        legendClasses: undefined,
+        legendTitleClasses: undefined,
+      });
+    });
+
+    it('does not add the description style class', () => {
+      const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_LEGENDISQUESTIONTITLE));
+
+      expect($('.ons-question__description').length).toBe(0);
+    });
+  });
+
+  describe('mode: with `readDescriptionFirst`', () => {
+    it('has a description element visually hidden before the title', () => {
+      const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_DESCRIPTION_FIRST));
+
+      expect(
+        $('.ons-question__title')
+          .text()
+          .trim(),
+      ).toBe('Question description Question title');
+    });
+
+    it('has the visible description element with aria-hidden attribute', () => {
+      const $ = cheerio.load(renderComponent('question', EXAMPLE_QUESTION_DESCRIPTION_FIRST));
+
+      expect($('.ons-question__description--aria-hidden').attr('aria-hidden')).toBe('true');
+    });
+  });
+});

package/components/quote/_macro.spec.js

@@ -0,0 +1,81 @@
+/** @jest-environment jsdom */
+
+import * as cheerio from 'cheerio';
+
+import axe from '../../tests/helpers/axe';
+import { renderComponent, templateFaker } from '../../tests/helpers/rendering';
+
+describe('macro: quote', () => {
+  it('passes jest-axe checks', async () => {
+    const $ = cheerio.load(
+      renderComponent('quote', {
+        text: 'Example quote text.',
+        ref: 'Example quote reference.',
+      }),
+    );
+
+    const results = await axe($.html());
+    expect(results).toHaveNoViolations();
+  });
+
+  it('has the provided `text` text', () => {
+    const $ = cheerio.load(
+      renderComponent('quote', {
+        text: 'Example quote text.',
+      }),
+    );
+
+    expect(
+      $('.ons-quote__text')
+        .text()
+        .trim(),
+    ).toBe('Example quote text.');
+  });
+
+  it('has the provided `ref` text with a leading "—" character', () => {
+    const $ = cheerio.load(
+      renderComponent('quote', {
+        text: 'Example quote text.',
+        ref: 'Example quote reference.',
+      }),
+    );
+
+    expect(
+      $('.ons-quote__ref')
+        .text()
+        .trim(),
+    ).toBe('— Example quote reference.');
+  });
+
+  it('has a default `textFontSize` of "l"', () => {
+    const $ = cheerio.load(
+      renderComponent('quote', {
+        text: 'Example quote text.',
+      }),
+    );
+
+    expect($('.ons-quote__text').hasClass('ons-u-fs-l')).toBe(true);
+  });
+
+  it('has the provided `textFontSize`', () => {
+    const $ = cheerio.load(
+      renderComponent('quote', {
+        text: 'Example quote text.',
+        textFontSize: 's',
+      }),
+    );
+
+    expect($('.ons-quote__text').hasClass('ons-u-fs-s')).toBe(true);
+  });
+
+  it('has `quote` icon', () => {
+    const faker = templateFaker();
+    const iconsSpy = faker.spy('icons');
+
+    faker.renderComponent('quote', {
+      text: 'Example quote text.',
+    });
+
+    expect(iconsSpy.occurrences[0].iconType).toBe('quote');
+  });
+});

package/components/radios/_macro.njk

@@ -54,7 +54,7 @@
                                             "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 else "") + radio.other.classes | default(''),
                                             "width": radio.other.width | default('auto'),
                                             "attributes": radio.other.attributes,
                                             "label": {
@@ -73,17 +73,14 @@
                                             "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 else "") + radio.other.classes | default(''),
                                             "label": {
                                                 "id": radio.other.id + "-label",
                                                 "text": radio.other.label.text,
                                                 "classes": 'ons-u-fw-n'
                                             },
                                             "dontWrap": true,
-                                            "value": radio.other.value,
-                                            "select": {
-                                                "error": params.error
-                                            }
+                                            "value": radio.other.value
                                         })
                                     }}
                                 {% elif otherType == "checkboxes" %}