Skip to content

Commit

Permalink
Modified summary component to handle household summary and simplified…
Browse files Browse the repository at this point in the history 
… CSS (#346)
  • Loading branch information
@bameyrick
bameyrick authored May 3, 2019
1 parent 70f5719 commit ed8c7be
Show file tree
Hide file tree
Showing 14 changed files with 326 additions and 339 deletions.
60 changes: 31 additions & 29 deletions src/components/summary/_macro-options.md
View file
Original file line number Diff line number Diff line change
@@ -1,38 +1,40 @@
| Name | Type | Required | Description |
| --------- | ---------------------- | -------- | --------------------------------------- |
| questions | Array<SummaryQuestion> | true | An array of questions to summarise |
| title | string | false | The title for the summary block |
| classes | string | false | Classes to add to the summary component |

## SummaryItem
| Name | Type | Required | Description |
| ------------ | -------------------- | -------- | --------------------------------------- |
| answers | Array<SummaryAnswer> | true | An array of answers for this question |
| title | string | false | The title for the question |
| error | boolean | false | Whether to render this item as an error |
| errorMessage | string | false | Error message for the question |
| total | boolean | false | Whether to render this item as a total |

## SummaryAnswer

| Name | Type | Required | Description |
| ------ | ------------------- | -------- | -------------------------------------------------------------------------------- |
| title | string | false | Label for the question |
| values | Array<SummaryValue> | true | The answer(s) to the question |
| action | SummaryAction | false | Configuration for the answer edit button. If not specified no button will render |
| Name | Type | Required | Description |
| ------- | ----------------- | -------- | --------------------------------------- |
| rows | Array<SummaryRow> | true | An array of rows to summarise |
| title | string | false | The title for the summary block |
| classes | string | false | Classes to add to the summary component |

## SummaryRow

| Name | Type | Required | Description |
| ------------ | --------------------- | -------- | --------------------------------------- |
| rowItems | Array<SummaryRowItem> | true | An array of items for this row |
| title | string | false | The title for the row |
| error | boolean | false | Whether to render this item as an error |
| errorMessage | string | false | Error message for the row |
| total | boolean | false | Whether to render this item as a total |

## SummaryRowItem

| Name | Type | Required | Description |
| ------- | -------------------- | -------- | ---------------------------------------------------------------------- |
| icon | string | false | Name of the icon to be placed next to the title |
| title | string | false | Label for the row item |
| values | Array<SummaryValue> | false | The value(s) to the row item |
| actions | Array<SummaryAction> | false | Configurations for action links. If not specified no links will render |

## SummaryValue

| Name | Type | Required | Description |
| ----- | ------ | -------- | -------------------------------------------------------------- |
| text | string | true | The display value for the answer value |
| text | string | true | The display value |
| other | string | false | The display value for the "other" input on a checkbox or radio |

## SummaryAction

| Name | Type | Required | Description |
| ---------- | ------ | -------- | ----------------------------------------------------------------------------------------- |
| text | string | true | Text for the action button |
| url | string | true | URL to edit the answer |
| ariaLabel | string | false | An aria-label to apply to the button if you need it to be more verbose for screen readers |
| attributes | object | false | HTML attributes (for example data attributes) to add to the action link |
| Name | Type | Required | Description |
| ---------- | ------ | -------- | --------------------------------------------------------------------------------------- |
| text | string | true | Text for the action link |
| url | string | true | URL to edit the answer |
| ariaLabel | string | false | An aria-label to apply to the link if you need it to be more verbose for screen readers |
| attributes | object | false | HTML attributes (for example data attributes) to add to the action link |
93 changes: 53 additions & 40 deletions src/components/summary/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,58 +3,71 @@
{% if params.title %}
<h2 class="u-fs-m">{{ params.title }}</h2>
{% endif %}

<table class="summary__items">
{% for question in (params.questions if params.questions is iterable else params.questions.items()) %}
{% for row in (params.rows if params.rows is iterable else params.rows.items()) %}
{% set itemClass = "" %}
{% if question.error %} {% set itemClass = " summary__item--error" %}{% endif %}
{% if question.total %} {% set itemClass = itemClass + " summary__item--total" %}{% endif %}
{% if row.error %} {% set itemClass = " summary__item--error" %}{% endif %}
{% if row.total %} {% set itemClass = itemClass + " summary__item--total" %}{% endif %}

<tbody class="summary__item{{ itemClass }}">
{% if question.errorMessage or (question.answers | length > 1 and question.title) %}
{% if row.errorMessage or (row.rowItems | length > 1 and row.title) %}
<tr class="summary__row">
<th colspan="3" class="summary__item-title u-fs-r">{{ question.errorMessage or question.title }}</th>
<th colspan="3" class="summary__row-title u-fs-r">{{ row.errorMessage or row.title }}</th>
</tr>
{% endif %}
{% for answer in question.answers %}

{% for rowItem in row.rowItems %}
<tr class="summary__row">
<td
class="summary__question"
{% if answer.titleAttributes %}{% for attribute, value in (answer.titleAttributes.items() if answer.titleAttributes is mapping and answer.titleAttributes.items else answer.titleAttributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
>{{ answer.title | default(question.title) }}</td>
<td
class="summary__answer u-fs-r--b"
{% if answer.action == null %} colspan="2"{% endif %}
{% if answer.attributes %}{% for attribute, value in (answer.attributes.items() if answer.attributes is mapping and answer.attributes.items else answer.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
class="summary__item-title{{ " summary__item-title--has-icon" if rowItem.icon else "" }}"
{% if rowItem.titleAttributes %}{% for attribute, value in (rowItem.titleAttributes.items() if rowItem.titleAttributes is mapping and rowItem.titleAttributes.items else rowItem.titleAttributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
>
{% if answer.values | length == 1 %}
{{ answer.values[0].text | safe }}
{% if answer.values[0].other %}
{% if rowItem.icon %}
<span class="summary__icon icon icon--{{ rowItem.icon }}"></span>
{% endif %}
{{ rowItem.title | default(row.title) }} {{ hasIcons }}
</td>
{% if rowItem.values %}
<td
class="summary__values u-fs-r--b"
{% if rowItem.actions == null %} colspan="2"{% endif %}
{% if rowItem.attributes %}{% for attribute, value in (rowItem.attributes.items() if rowItem.attributes is mapping and rowItem.attributes.items else rowItem.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
>
{% if rowItem.values | length == 1 %}
{{ rowItem.values[0].text | safe }}
{% if rowItem.values[0].other %}
<ul class="u-mb-no">
<li>{{ rowItem.values[0].other | safe }}</li>
</ul>
{% endif %}
{% else %}
<ul class="u-mb-no">
<li>{{ answer.values[0].other | safe }}</li>
{% for value in (rowItem.values if rowItem.values is iterable else rowItem.values.items()) %}
<li>
{{ value.text | safe }}
{% if value.other %}
<ul class="u-mb-no">
<li>{{ value.other | safe }}</li>
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
{% else %}
<ul class="u-mb-no">
{% for value in (answer.values if answer.values is iterable else answer.values.items()) %}
<li>
{{ value.text | safe }}
{% if value.other %}
<ul class="u-mb-no">
<li>{{ value.other | safe }}</li>
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</td>
{% if answer.action %}
<td class="summary__action">
<a
href="{{ answer.action.url }}"
class="summary__button"
{% if answer.action.ariaLabel %} aria-label="{{ answer.action.ariaLabel }}"{% endif %}
{% if answer.action.attributes %}{% for attribute, value in (answer.action.attributes.items() if answer.action.attributes is mapping and answer.action.attributes.items else answer.action.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
>{{ answer.action.text }}</a>
</td>
{% endif %}
{% if rowItem.actions %}
<td class="summary__actions">
{% for action in (rowItem.actions if rowItem.actions is iterable else rowItem.actions.items()) %}
{% if loop.index > 1 %}<span class="summary__spacer">|</span>{% endif %}
<a
href="{{ rowItem.action.url }}"
class="summary__button"
{% if action.ariaLabel %} aria-label="{{ action.ariaLabel }}"{% endif %}
{% if action.attributes %}{% for attribute, value in (action.attributes.items() if action.attributes is mapping and action.attributes.items else action.attributes) %}{{attribute}}="{{value}}" {% endfor %}{% endif %}
>{{ action.text }}</a>
{% endfor %}
</td>
{% endif %}
</tr>
Expand Down
Loading

0 comments on commit ed8c7be

Please sign in to comment.