Skip to content

Commit

Permalink
refactor summary component to remove extra div in dl
Browse files Browse the repository at this point in the history
  • Loading branch information
@rmccar
rmccar committed Oct 28, 2024
1 parent 0d4f9d3 commit c4ae1a7
Show file tree
Hide file tree
Showing 2 changed files with 89 additions and 85 deletions.
149 changes: 73 additions & 76 deletions src/components/summary/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,9 @@
{% set itemClass = "" %}
{% if row.error %}{% set itemClass = " ons-summary__item--error" %}{% endif %}
{% if row.total %}{% set itemClass = itemClass + " ons-summary__item--total" %}{% endif %}
<div {% if row.id %}id="{{ row.id }}"{% endif %}class="ons-summary__item{{ itemClass }}">
<div
{% if row.id %}id="{{ row.id }}"{% endif %}class="ons-summary__item{{ itemClass }}{{ ' ons-summary__row--has-values' if item.valueList else "" }}"
>
{% if row.errorMessage %}
<div class="ons-summary__row-title--error ons-u-fs-r">{{ row.errorMessage }}</div>
{% endif %}
Expand All @@ -44,87 +46,82 @@
{% endif %}

{% for item in row.itemsList %}
<div
class="ons-summary__row{{ ' ons-summary__row--has-values' if item.valueList else "" }}"
{% if item.id %}id="{{ item.id }}"{% endif %}
<dt
class="ons-summary__item-title"
{% if item.titleAttributes %}{% for attribute, value in (item.titleAttributes.items() if item.titleAttributes is mapping and item.titleAttributes.items else item.titleAttributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
>
<dt
class="ons-summary__item-title"
{% if item.titleAttributes %}{% for attribute, value in (item.titleAttributes.items() if item.titleAttributes is mapping and item.titleAttributes.items else item.titleAttributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
>
{% if item.iconType %}
{% from "components/icon/_macro.njk" import onsIcon %}
<span
class="ons-summary__item-title-icon{{ ' ons-summary__item-title-icon--check' if item.iconType == 'check' else "" }}"
>
{{-
onsIcon({
"iconType": item.iconType
})
-}}
{% if item.iconVisuallyHiddenText %}
<span class="ons-u-vh">{{ item.iconVisuallyHiddenText }}</span>
{% endif %}
</span>
{% endif %}

<div
class="ons-summary__item--text{{ ' ons-summary__item-title--text' if item.iconType else "" }}"
{% if item.iconType %}
{% from "components/icon/_macro.njk" import onsIcon %}
<span
class="ons-summary__item-title-icon{{ ' ons-summary__item-title-icon--check' if item.iconType == 'check' else "" }}"
>
{{- item.title | default(row.title) | safe -}}
</div>
{{-
onsIcon({
"iconType": item.iconType
})
-}}
{% if item.iconVisuallyHiddenText %}
<span class="ons-u-vh">{{ item.iconVisuallyHiddenText }}</span>
{% endif %}
</span>
{% endif %}

{# Render section status for mobile if is hub #}
{% if variantHub and item.valueList %}
<span class="ons-u-d-no@m ons-u-fs-r"> — {{ item.valueList[0].text | safe }}</span>
{% endif %}
</dt>
{% if item.valueList %}
<dd
class="ons-summary__values{{ ' ons-summary__values--2' if not item.actions }}"
{% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
>
{% if item.valueList | length == 1 %}
<span class="ons-summary__text">{{ item.valueList[0].text | safe }}</span>
{% if item.valueList[0].other or item.valueList[0].other == 0 %}
<ul class="ons-u-mb-no">
<li>{{ item.valueList[0].other | safe }}</li>
</ul>
{% endif %}
{% else %}
<div
class="ons-summary__item--text{{ ' ons-summary__item-title--text' if item.iconType else "" }}"
>
{{- item.title | default(row.title) | safe -}}
</div>

{# Render section status for mobile if is hub #}
{% if variantHub and item.valueList %}
<span class="ons-u-d-no@m ons-u-fs-r"> — {{ item.valueList[0].text | safe }}</span>
{% endif %}
</dt>
{% if item.valueList %}
<dd
class="ons-summary__values{{ ' ons-summary__values--2' if not item.actions }}"
{% if item.attributes %}{% for attribute, value in (item.attributes.items() if item.attributes is mapping and item.attributes.items else item.attributes) %}{{ attribute }}="{{ value }}"{% endfor %}{% endif %}
>
{% if item.valueList | length == 1 %}
<span class="ons-summary__text">{{ item.valueList[0].text | safe }}</span>
{% if item.valueList[0].other or item.valueList[0].other == 0 %}
<ul class="ons-u-mb-no">
{% for value in item.valueList %}
<li>
<span class="ons-summary__text">{{ value.text | safe }}</span>
{% if value.other or value.other == 0 %}
<ul class="ons-u-mb-no">
<li>{{ value.other | safe }}</li>
</ul>
{% endif %}
</li>
{% endfor %}
<li>{{ item.valueList[0].other | safe }}</li>
</ul>
{% endif %}
</dd>
{% endif %}
{% if item.actions %}
<dd class="ons-summary__actions">
{% for action in item.actions %}
{% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
<a
href="{{ action.url }}"
class="ons-summary__button"
{% 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 %}
>
<span class="ons-summary__button-text" aria-hidden="true">
{{- action.text -}}
</span>
<span class="ons-u-vh">{{ action.visuallyHiddenText }}</span>
</a>
{% endfor %}
</dd>
{% endif %}
</div>
{% else %}
<ul class="ons-u-mb-no">
{% for value in item.valueList %}
<li>
<span class="ons-summary__text">{{ value.text | safe }}</span>
{% if value.other or value.other == 0 %}
<ul class="ons-u-mb-no">
<li>{{ value.other | safe }}</li>
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</dd>
{% endif %}
{% if item.actions %}
<dd class="ons-summary__actions">
{% for action in item.actions %}
{% if loop.index > 1 %}<span class="ons-summary__spacer"></span>{% endif %}
<a
href="{{ action.url }}"
class="ons-summary__button"
{% 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 %}
>
<span class="ons-summary__button-text" aria-hidden="true">
{{- action.text -}}
</span>
<span class="ons-u-vh">{{ action.visuallyHiddenText }}</span>
</a>
{% endfor %}
</dd>
{% endif %}
{% endfor %}
</div>
{% endfor %}
Expand Down
25 changes: 16 additions & 9 deletions src/components/summary/_summary.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,17 @@ $hub-row-spacing: 1.3rem;
}
}

&__row {
&__item {
display: flex;
margin: 0;
}

&__item {
flex-wrap: wrap;
&:not(:last-child),
&:not(.ons-summary__group--card .ons-summary__item):nth-of-type(1) {
border-bottom: 1px solid var(--ons-color-borders);
}
}

&__item {
&--total {
@extend .ons-u-fs-m;

Expand All @@ -51,6 +51,7 @@ $hub-row-spacing: 1.3rem;
&__row-title {
padding: $summary-row-spacing 0;
text-align: left;
flex: 0 0 100%;
}
// reduces the gap between row title and summary title when there is no group title
&__title + &__group &__row-title--no-group-title {
Expand Down Expand Up @@ -95,12 +96,13 @@ $hub-row-spacing: 1.3rem;
width: 1px;
}

// Item Modifiers
// Row Modifiers
&__item--error & {
&__row-title--error {
color: var(--ons-color-errors);
font-weight: $font-weight-bold;
padding: $summary-row-spacing $summary-col-spacing;
flex: 0 0 100%;
}

&__row-title,
Expand Down Expand Up @@ -159,7 +161,7 @@ $hub-row-spacing: 1.3rem;
}
}

&__row {
&__item {
flex-direction: column;
}
}
Expand All @@ -172,14 +174,19 @@ $hub-row-spacing: 1.3rem;
flex: 5 1 33%;
padding-top: $summary-row-spacing;
vertical-align: top;
&:not(:last-child) {
padding-right: $summary-col-spacing;
}
}

&__item-title,
&__values {
padding-right: $summary-col-spacing;
}

&__actions {
display: flex;
justify-content: right;
& :not(.ons-summary__item-title--error) {
padding-right: 0;
}
}

&__button {
Expand Down

0 comments on commit c4ae1a7

Please sign in to comment.