Test content.
'], - ), - ); - - const results = await axe($.html()); - expect(results).toHaveNoViolations(); - }); - - it('has the provided `id` attribute', () => { - const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT)); - - expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit'); - }); - - it('has the provided data attributes', () => { - const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT)); - - expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining'); - expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining'); - expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many'); - expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many'); +import { EXAMPLE_CHAR_CHECK_LIMIT } from './_test-examples'; + +describe('FOR: Macro: CharCheckLimit', () => { + describe('GIVEN: Params: Required', () => { + describe('WHEN: required params are provided', () => { + const $ = cheerio.load(renderComponent('char-check-limit', EXAMPLE_CHAR_CHECK_LIMIT)); + + test('THEN: passes jest-axe checks', async () => { + const results = await axe($.html()); + + expect(results).toHaveNoViolations(); + }); + test('THEN: has the provided id attribute', () => { + expect($('.ons-input__limit').attr('id')).toBe('example-char-check-limit'); + }); + test('THEN: has the data attribute which defines charCountPlural', () => { + expect($('.ons-input__limit').attr('data-charcount-plural')).toBe('You have {x} characters remaining'); + }); + test('THEN: has the data attribute which defines charCountSingular', () => { + expect($('.ons-input__limit').attr('data-charcount-singular')).toBe('You have {x} character remaining'); + }); + test('THEN: has the data attribute which defines charCountOverLimitSingular', () => { + expect($('.ons-input__limit').attr('data-charcount-limit-singular')).toBe('{x} character too many'); + }); + test('THEN: has the data attribute which defines charCountOverLimitPlural', () => { + expect($('.ons-input__limit').attr('data-charcount-limit-plural')).toBe('{x} characters too many'); + }); + }); }); - it('has expected nested content', () => { - const $ = cheerio.load( - renderComponent( - 'char-check-limit', - { - ...EXAMPLE_CHAR_CHECK_LIMIT, - variant: 'check', - }, - ['Test content.
'], - ), - ); - - expect($('.ons-js-char-check-input').html().trim()).toBe('Test content.
'); + describe('GIVEN: Params: variant', () => { + describe('WHEN: variant is provided', () => { + const $ = cheerio.load( + renderComponent( + 'char-check-limit', + { + ...EXAMPLE_CHAR_CHECK_LIMIT, + variant: 'check', + }, + ['Test content.
'], + ), + ); + + test('THEN: passes jest-axe checks with variant set to check', async () => { + const results = await axe($.html()); + expect(results).toHaveNoViolations(); + }); + + test('THEN: renders the passed content', () => { + expect($('.ons-js-char-check-input').text()).toBe('Test content.'); + }); + }); }); }); diff --git a/src/components/char-check-limit/_test-examples.js b/src/components/char-check-limit/_test-examples.js new file mode 100644 index 0000000000..6a700b1cbb --- /dev/null +++ b/src/components/char-check-limit/_test-examples.js @@ -0,0 +1,7 @@ +export const EXAMPLE_CHAR_CHECK_LIMIT = { + id: 'example-char-check-limit', + charCountSingular: 'You have {x} character remaining', + charCountPlural: 'You have {x} characters remaining', + charCountOverLimitSingular: '{x} character too many', + charCountOverLimitPlural: '{x} characters too many', +}; diff --git a/src/components/description-list/_macro-options.md b/src/components/description-list/_macro-options.md index 324f027775..3a64f09971 100644 --- a/src/components/description-list/_macro-options.md +++ b/src/components/description-list/_macro-options.md @@ -21,3 +21,4 @@ | ----------- | ------ | -------- | ----------------------------------------------------- | | id | string | false | The HTML `id` for the description of the related term | | description | string | true | The value of the description of the related term | +| url | string | false | The url of the description of the related term | diff --git a/src/components/description-list/_macro.njk b/src/components/description-list/_macro.njk index 329491b2c9..92e9890a1f 100644 --- a/src/components/description-list/_macro.njk +++ b/src/components/description-list/_macro.njk @@ -21,7 +21,13 @@ {% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %} class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}" > - {{- descriptionItem.description -}} + {%- if descriptionItem.url -%} + + {{- descriptionItem.description -}} + + {%- else -%} + {{- descriptionItem.description -}} + {%- endif -%} {% endif %} {% endfor %} diff --git a/src/components/description-list/_macro.spec.js b/src/components/description-list/_macro.spec.js index fa45111ceb..508a51cd6d 100644 --- a/src/components/description-list/_macro.spec.js +++ b/src/components/description-list/_macro.spec.js @@ -30,6 +30,7 @@ const EXAMPLE_DESCRIPTION_LIST_FULL = { { id: 'description-3', description: '49300005832', + url: '#', }, ], }, @@ -142,7 +143,9 @@ describe('macro: description-list', () => { expect($listElements[4].tagName).toBe('dd'); expect($($listElements[4]).attr('id')).toBe('description-3'); - expect($($listElements[4]).text()).toBe('49300005832'); + const $link = $($listElements[4]).find('a'); + expect($link.attr('href')).toBe('#'); + expect($link.text()).toBe('49300005832'); }); it.each([ diff --git a/src/components/description-list/example-inline-description-list.njk b/src/components/description-list/example-inline-description-list.njk index e7114ffd1e..a43605286c 100644 --- a/src/components/description-list/example-inline-description-list.njk +++ b/src/components/description-list/example-inline-description-list.njk @@ -49,7 +49,8 @@ "description": "Jacky Turner" }, { - "description": "Louise Goodland" + "description": "Louise Goodland", + 'url': '#' } ] } diff --git a/src/components/panel/_macro-options.md b/src/components/panel/_macro-options.md index 7d0b893587..0541e4cbe5 100644 --- a/src/components/panel/_macro-options.md +++ b/src/components/panel/_macro-options.md @@ -1,13 +1,13 @@ -| Name | Type | Required | Description | -| ------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| body | string | true | The contents of the panel. This can contain HTML. | -| title | string | false | The title for the error summary panel | -| headingLevel | int | false | Number used to determine the heading level of the title. Use to ensure the title has a correct semantic order on the page. Defaults to `2` | -| type | string | false | A single value to adjust the component using available variants: “success”, “warn”, “ghost”, “bare”, “error”, “branded”, “warn-branded”, and “announcement” | -| spacious | boolean | false | Set to “true” to double the padding spacing surrounding the body content if required | -| classes | string | false | Custom classes to add to the panel | -| id | string | false | The HTML `id` for the panel | -| attributes | object | false | HTML attributes to apply to the panel (for example, data attributes) | -| assistiveTextPrefix | string | false | Sets the visually hidden prefix text for screen readers. Default values for each panel type: