Skip to content

Commit

Permalink
Merge branch 'main' into enhancement/46/testing-refactor-document-list
Browse files Browse the repository at this point in the history
  • Loading branch information
@SriHV
SriHV authored Dec 16, 2024
2 parents d571d47 + 2f6bcf0 commit 777ff28
Show file tree
Hide file tree
Showing 8 changed files with 139 additions and 22 deletions.
3 changes: 3 additions & 0 deletions ...nents_description-list_example-inline-description-list_0_document_0_desktop.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...onents_description-list_example-inline-description-list_0_document_1_tablet.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions ...onents_description-list_example-inline-description-list_0_document_2_mobile.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
49 changes: 40 additions & 9 deletions src/components/description-list/_description-list.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,25 +7,56 @@
clear: both;
float: left;
font-weight: $font-weight-bold;

&:not(:first-child) {
margin-top: 0.5rem;
}
}

&__value {
float: right;
margin-left: 0; /* As normalize adds a 40px left margin */
}

&:not(:nth-of-type(1)) {
@include mq(m) {
&__item {
&:not(:first-child) {
.ons-description-list__term {
margin-top: 0.5rem;
}

.ons-description-list__value:nth-of-type(1) {
@include mq(m) {
margin-top: 0.5rem;
}
}

.ons-description-list--inline & {
.ons-description-list__value:nth-of-type(1),
.ons-description-list__term {
@include mq(l) {
margin-top: 0;
}
@include mq(xs, l) {
margin-top: 0.5rem;
}
}
}
}
}

&--inline {
.ons-description-list__term {
padding-right: 1rem;
}

& + & {
@include mq(m) {
margin-top: 0;
@include mq(l) {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem 2.5rem;

.ons-description-list__value {
grid-column-start: 2;
}

.ons-description-list__item {
display: grid;
grid-template-columns: auto 1fr;
}
}
}
Expand Down
1 change: 1 addition & 0 deletions src/components/description-list/_macro-options.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
| termCol | number | true | The number of grid columns used for the `<dt>` elements above medium breakpoint |
| descriptionCol | number | true | The number of grid columns used for the `<dd>` elements above medium breakpoint |
| itemsList | array`<Item>` | true | Settings for the terms and descriptions of the [description list items](#item) |
| variant | string | false | Set to "inline" to display the description list inline |

## Item

Expand Down
32 changes: 20 additions & 12 deletions src/components/description-list/_macro.njk
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,31 @@
{% macro onsDescriptionList(params) %}
<dl
class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless ons-u-cf{{ " " + params.classes if params.classes else "" }}"
{% if params.id %}id="{{ params.id }}"{% endif %}{% if params.descriptionListLabel %}
class="ons-description-list ons-description-list__items ons-grid ons-grid--gutterless{{ ' ons-description-list--inline' if params.variant == 'inline' else ' ons-u-cf' }}{{ ' ' + params.classes if params.classes else '' }}"
{% if params.id %}id="{{ params.id }}"{% endif %}
{% if params.descriptionListLabel %}
title="{{ params.descriptionListLabel }}" aria-label="{{ params.descriptionListLabel }}"
{% endif %}
>
{% for item in params.itemsList %}
{% if item.term | length %}
<dt class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@m">{{ item.term }}</dt>
{% endif %}
{% for descriptionItem in item.descriptions %}
{% if descriptionItem.description | length %}
<dd
{% if descriptionItem.id %}id="{{ descriptionItem.id }}"{% endif %}class="ons-description-list__value ons-grid__col ons-col-{{ params.descriptionCol }}@m"
<div class="ons-description-list__item">
{% if item.term | length %}
<dt
class="ons-description-list__term ons-grid__col ons-col-{{ params.termCol }}@{{ 'xs@l' if params.variant == 'inline' else 'm' }}"
>
{{- descriptionItem.description -}}
</dd>
{{- item.term -}}
</dt>
{% endif %}
{% endfor %}
{% for descriptionItem in item.descriptions %}
{% if descriptionItem.description | length %}
<dd
{% 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 -}}
</dd>
{% endif %}
{% endfor %}
</div>
{% endfor %}
</dl>
{% endmacro %}
12 changes: 11 additions & 1 deletion src/components/description-list/_macro.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
/** @jest-environment jsdom */

import * as cheerio from 'cheerio';

import axe from '../../tests/helpers/axe';
import { renderComponent } from '../../tests/helpers/rendering';

Expand Down Expand Up @@ -87,6 +86,17 @@ describe('macro: description-list', () => {
expect($('#example-id').length).toBe(1);
});

it('has the provided variant style class when variant is provided', () => {
const $ = cheerio.load(
renderComponent('description-list', {
...EXAMPLE_DESCRIPTION_LIST_MINIMAL,
variant: 'inline',
}),
);

expect($('.ons-description-list').hasClass('ons-description-list--inline')).toBe(true);
});

it('has additionally provided style classes', () => {
const $ = cheerio.load(
renderComponent('description-list', {
Expand Down
58 changes: 58 additions & 0 deletions src/components/description-list/example-inline-description-list.njk
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
{% from "components/description-list/_macro.njk" import onsDescriptionList %}
{{
onsDescriptionList({
"classes": "ons-u-mb-no",
"descriptionListLabel": "Information about this business and its survey requirements",
"variant": 'inline',
"termCol": "4",
"descriptionCol": "8",
"itemsList": [
{
"term": "Survey:",
"descriptions": [
{
"description": "Bricks & Blocks"
}
]
},
{
"term": "RU Refs:",
"descriptions": [
{
"description": "49900000118"
},
{
"description": "49300005832"
}
]
},
{
"term": "Business:",
"descriptions": [
{
"description": "Bolts & Ratchets Ltd."
}
]
},
{
"term": "Trading as:",
"descriptions": [
{
"description": "Bolts & Ratchets"
}
]
},
{
"term": "To:",
"descriptions": [
{
"description": "Jacky Turner"
},
{
"description": "Louise Goodland"
}
]
}
]
})
}}

0 comments on commit 777ff28

Please sign in to comment.