@ons/design-system 70.0.8 → 70.0.10

package/components/summary/example-summary-hub.njk

@@ -1,170 +1,172 @@
 {% from "components/summary/_macro.njk" import onsSummary %}
 
-{{ onsSummary({
-    "variant": "hub",
-    "summaries": [
-            {
-                "groups": [
-                    {
-                    "rows": [
+{{
+    onsSummary({
+        "variant": "hub",
+        "summaries": [
+                {
+                    "groups": [
                         {
-                            "rowTitle": "People who live here",
-                            "rowItems": [
-                                {
-                                    "iconType": "check",
-                                    "valueList": [
-                                        {
-                                            "text": "Completed"
-                                        }
-                                    ],
-                                    "actions": [
-                                        {
-                                            "text": "View answers",
-                                            "visuallyHiddenText": "View answers for People who live here",
-                                            "url": "#0"
-                                        }
-                                    ]
-                                }
-                            ]
-                        },
-                        {
-                            "rowTitle": "Accommodation",
-                            "rowItems": [
-                                {
-                                    "iconType": "check",
-                                    "valueList": [
-                                        {
-                                            "text": "Completed"
-                                        }
-                                    ],
-                                    "actions": [
-                                        {
-                                            "text": "View answers",
-                                            "visuallyHiddenText": "View answers for Accommodation",
-                                            "url": "#0"
-                                        }
-                                    ]
-                                }
-                            ]
-                        },
-                        {
-                            "rowTitle": "Mary Smith (You)",
-                            "rowItems": [
-                                {
-                                    "iconType": "check",
-                                    "valueList": [
-                                        {
-                                            "text": "Completed"
-                                        }
-                                    ],
-                                    "actions": [
-                                        {
-                                            "text": "View answers",
-                                            "visuallyHiddenText": "View answers for Mary Smith",
-                                            "url": "#0"
-                                        }
-                                    ]
-                                }
-                            ]
-                        },
-                        {
-                            "rowTitle": "John Smith",
-                            "rowItems": [
-                                {
-                                    "valueList": [
-                                        {
-                                            "text": "Partially completed"
-                                        }
-                                    ],
-                                    "actions": [
-                                        {
-                                            "text": "Continue with section",
-                                            "visuallyHiddenText": "Continue with John Smith's section",
-                                            "url": "#0"
-                                        }
-                                    ]
-                                }
-                            ]
-                        },
-                        {
-                            "rowTitle": "Billy Smith",
-                            "rowItems": [
-                                {
-                                    "valueList": [
-                                        {
-                                            "text": "Not started"
-                                        }
-                                    ],
-                                    "actions": [
-                                        {
-                                            "text": "Start section",
-                                            "visuallyHiddenText": "Start Billy Smith's section",
-                                            "url": "#0"
-                                        }
-                                    ]
-                                }
-                            ]
-                        },
-                        {
-                            "rowTitle": "Sally Smith",
-                            "rowItems": [
-                                {
-                                    "valueList": [
-                                        {
-                                            "text": "Not started"
-                                        }
-                                    ],
-                                    "actions": [
-                                        {
-                                            "text": "Start section",
-                                            "visuallyHiddenText": "Start Sally Smith's section",
-                                            "url": "#0"
-                                        }
-                                    ]
-                                }
-                            ]
-                        },
-                        {
-                            "rowTitle": "Wilhelmina Susannah Clementine-Smith (Visitor)",
-                            "rowItems": [
-                                {
-                                    "valueList": [
-                                        {
-                                            "text": "Not started"
-                                        }
-                                    ],
-                                    "actions": [
-                                        {
-                                            "text": "Start section",
-                                            "visuallyHiddenText": "Start Wilhelmina Susannah Clementine-Smith's section",
-                                            "url": "#0"
-                                        }
-                                    ]
-                                }
-                            ]
-                        },
-                        {
-                            "rowTitle": "Vera Jones (Visitor)",
-                            "rowItems": [
-                                {
-                                    "valueList": [
-                                        {
-                                            "text": "Not started"
-                                        }
-                                    ],
-                                    "actions": [
-                                        {
-                                            "text": "Start section",
-                                            "visuallyHiddenText": "Start Vera Jones's section",
-                                            "url": "#0"
-                                        }
-                                    ]
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        }
-    ]
-}) }}
+                        "rows": [
+                            {
+                                "rowTitle": "People who live here",
+                                "rowItems": [
+                                    {
+                                        "iconType": "check",
+                                        "valueList": [
+                                            {
+                                                "text": "Completed"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "View answers",
+                                                "visuallyHiddenText": "View answers for People who live here",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "Accommodation",
+                                "rowItems": [
+                                    {
+                                        "iconType": "check",
+                                        "valueList": [
+                                            {
+                                                "text": "Completed"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "View answers",
+                                                "visuallyHiddenText": "View answers for Accommodation",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "Mary Smith (You)",
+                                "rowItems": [
+                                    {
+                                        "iconType": "check",
+                                        "valueList": [
+                                            {
+                                                "text": "Completed"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "View answers",
+                                                "visuallyHiddenText": "View answers for Mary Smith",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "John Smith",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "Partially completed"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Continue with section",
+                                                "visuallyHiddenText": "Continue with John Smith's section",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "Billy Smith",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "Not started"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Start section",
+                                                "visuallyHiddenText": "Start Billy Smith's section",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "Sally Smith",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "Not started"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Start section",
+                                                "visuallyHiddenText": "Start Sally Smith's section",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "Wilhelmina Susannah Clementine-Smith (Visitor)",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "Not started"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Start section",
+                                                "visuallyHiddenText": "Start Wilhelmina Susannah Clementine-Smith's section",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                "rowTitle": "Vera Jones (Visitor)",
+                                "rowItems": [
+                                    {
+                                        "valueList": [
+                                            {
+                                                "text": "Not started"
+                                            }
+                                        ],
+                                        "actions": [
+                                            {
+                                                "text": "Start section",
+                                                "visuallyHiddenText": "Start Vera Jones's section",
+                                                "url": "#0"
+                                            }
+                                        ]
+                                    }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    })
+}}

package/components/table/_macro.njk

@@ -1,21 +1,29 @@
 {% macro onsTable(params) %}
     {% from "components/button/_macro.njk" import onsButton %}
     {% from "components/icon/_macro.njk" import onsIcon %}
+    {% set variants = params.variants if params.variants %}
 
-    {% set variants = params.variants if params.variants else '' %}
-
-    {% if 'scrollable' in variants %}
-    <div class="ons-table-scrollable ons-table-scrollable--on">
-        <div class="ons-table-scrollable__content" tabindex="0" role="region" aria-label="{{ params.caption }}. {{ params.ariaLabel | default("Scrollable table") }}">
-    {% endif %}
-            <table {% if params.id %}id="{{ params.id }}"{% endif %} class="ons-table{% if params.tableClasses %} {{ params.tableClasses }}{% endif %}{% if variants %}{% if variants is not string %}{% for variant in variants %} ons-table--{{ variant }}{% endfor %}{% else %} ons-table--{{ variants }}{% endif %}{% endif %}" {% if params.sortBy and 'sortable' in variants %}data-aria-sort="{{ params.sortBy }}" data-aria-asc="{{ params.ariaAsc }}" data-aria-desc="{{ params.ariaDesc }}"{% endif %}>
-                {% if params.caption %}
-                <caption class="ons-table__caption{{ " ons-u-vh" if params.hideCaption }}">{{ params.caption }}</caption>
-                {% endif %}
-                <thead class="ons-table__head">
-                    <tr class="ons-table__row">
-                        {% for th in params.ths %}
-                        <th scope="col" class="ons-table__header{{ ' ' + th.thClasses if th.thClasses }}{{ " ons-table__header--numeric" if th.numeric }}"{% if 'sortable' in variants %} aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}{% if th.widthPercentage %} width="{{ th.widthPercentage }}%"{% endif %}>
+    {% set table %}
+        <table
+            {% if params.id %}id="{{ params.id }}"{% endif %}
+            class="ons-table{{ ' ' + params.tableClasses if params.tableClasses else '' }}{% if variants and variants is not string %}{% for variant in variants %}{{ ' ' }}ons-table--{{ variant }}{% endfor %}{% else %}{{ ' ' }}ons-table--{{ variants }}{% endif %}"
+            {% if params.sortBy and 'sortable' in variants %}
+                data-aria-sort="{{ params.sortBy }}" data-aria-asc="{{ params.ariaAsc }}" data-aria-desc="{{ params.ariaDesc }}"
+            {% endif %}
+        >
+            {% if params.caption %}
+                <caption class="ons-table__caption{{ " ons-u-vh" if params.hideCaption }}">
+                    {{ params.caption }}
+                </caption>
+            {% endif %}
+            <thead class="ons-table__head">
+                <tr class="ons-table__row">
+                    {% for th in params.ths %}
+                        <th
+                            scope="col"
+                            class="ons-table__header{{ ' ' + th.thClasses if th.thClasses else '' }}{{ ' ons-table__header--numeric'if th.numeric }}"
+                            {% if 'sortable' in variants %}aria-sort="{{- th.ariaSort | default('none') -}}"{% endif %}{% if th.widthPercentage %}width="{{ th.widthPercentage }}%"{% endif %}
+                        >
                             <span class="ons-table__header-text">{{- th.value -}}</span>
                             {% if 'sortable' in variants %}
                                 {{-
@@ -27,46 +35,65 @@
                                 -}}
                             {% endif %}
                         </th>
-                        {% endfor %}
-                    </tr>
-                </thead>
-                <tbody class="ons-table__body">
-                    {% for tr in params.trs %}
-                    <tr class="ons-table__row{{ " ons-table__row--highlight" if tr.highlight }}" {% if tr.id %} id="{{ tr.id }}"{% endif %}>
+                    {% endfor %}
+                </tr>
+            </thead>
+            <tbody class="ons-table__body">
+                {% for tr in params.trs %}
+                    <tr class="ons-table__row{{ ' ons-table__row--highlight' if tr.highlight }}" {% if tr.id %}id="{{ tr.id }}"{% endif %}>
                         {% for td in tr.tds %}
-                        <td class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses }}{{ " ons-table__cell--numeric" if td.numeric }}" {% if td.id %} id="{{ td.id }}"{% endif %} {% if td.data %} data-th="{{ td.data }}"{% endif %} {% if td.dataSort %} data-sort-value="{{ td.dataSort }}"{% endif %}>
-                            {% if td.form %}
-                                <form action="{{ td.form.action }}" method="{{ td.form.method | default('POST')}}">
-                                    {{
-                                        onsButton(td.form.button)
-                                    }}
-                                    {% if td.form.hiddenFormField %}
-                                        {% for hiddenField in td.form.hiddenFormField %}
-                                            <input type="hidden" {% if hiddenField.name %} name="{{ hiddenField.name }}"{% endif %} {% if hiddenField.value %} value="{{ hiddenField.value }}"{% endif %} />
-                                        {% endfor %}
-                                    {% endif %}
-                                </form>
-                            {% endif %}
-                            {% if td.value %}
-                                {{ td.value | safe }}
-                            {% endif %}
-                        </td>
+                            <td
+                                class="ons-table__cell{{ ' ' + td.tdClasses if td.tdClasses else '' }}{{ ' ons-table__cell--numeric' if td.numeric }}"
+                                {% if td.id %}id="{{ td.id }}"{% endif %}
+                                {% if td.data %}{{ ' ' }}data-th="{{ td.data }}"{% endif %}
+                                {% if td.dataSort %}{{ ' ' }}data-sort-value="{{ td.dataSort }}"{% endif %}
+                            >
+                                {% if td.form %}
+                                    <form action="{{ td.form.action }}" method="{{ td.form.method | default('POST') }}">
+                                        {{ onsButton(td.form.button) }}
+                                        {% if td.form.hiddenFormField %}
+                                            {% for hiddenField in td.form.hiddenFormField %}
+                                                <input
+                                                    type="hidden"
+                                                    {% if hiddenField.name %}name="{{ hiddenField.name }}"{% endif %}
+                                                    {% if hiddenField.value %}value="{{ hiddenField.value }}"{% endif %}
+                                                />
+                                            {% endfor %}
+                                        {% endif %}
+                                    </form>
+                                {% endif %}
+                                {% if td.value %}
+                                    {{ td.value | safe }}
+                                {% endif %}
+                            </td>
                         {% endfor %}
                     </tr>
-                    {% endfor %}
-                </tbody>
-                {% if params.tfoot %}
+                {% endfor %}
+            </tbody>
+            {% if params.tfoot %}
                 <tfoot class="ons-table__foot">
                     <tr class="ons-table__row">
                         {% for tfootCell in params.tfoot %}
-                        <td class="ons-table__cell ons-u-fs-s">{{ tfootCell.value }}</td>
+                            <td class="ons-table__cell ons-u-fs-s">{{ tfootCell.value }}</td>
                         {% endfor %}
                     </tr>
                 </tfoot>
-                {% endif %}
-            </table>
-        {% if 'scrollable' in variants %}
+            {% endif %}
+        </table>
+    {% endset %}
+
+    {% if 'scrollable' in variants %}
+        <div class="ons-table-scrollable ons-table-scrollable--on">
+            <div
+                class="ons-table-scrollable__content"
+                tabindex="0"
+                role="region"
+                aria-label="{{ params.caption }}. {{ params.ariaLabel | default('Scrollable table') }}"
+            >
+                {{ table | safe }}
+            </div>
         </div>
-    </div>
+    {% else %}
+        {{ table | safe }}
     {% endif %}
 {% endmacro %}

package/components/table-of-contents/_macro.njk

@@ -1,43 +1,45 @@
 {% macro onsTableOfContents(params) %}
-{% from "components/list/_macro.njk" import onsList %}
-{% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
+    {% from "components/list/_macro.njk" import onsList %}
+    {% from "components/skip-to-content/_macro.njk" import onsSkipToContent %}
 
-<aside class="ons-toc-container" role="complementary">
-    {% if params.skipLink %}
-        {{
-            onsSkipToContent({
-                "url": params.skipLink.url,
-                "text": params.skipLink.text
-            })
-        }}
-    {% endif %}
+    <aside class="ons-toc-container" role="complementary">
+        {% if params.skipLink %}
+            {{
+                onsSkipToContent({
+                    "url": params.skipLink.url,
+                    "text": params.skipLink.text
+                })
+            }}
+        {% endif %}
 
-    <nav class="ons-toc" aria-label="{{ params.ariaLabel | default('Table of contents') }}">
-        <h2 class="ons-toc__title ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h2>
-        {% if params.lists %}
-            {% for list in params.lists %}
-                {% if list.listHeading %}
-                    <h3 class="ons-u-fs-r ons-u-mb-xs">{{ list.listHeading }}<span class="ons-u-vh"> {{ list.listHeadingHidden }}</span>:</h3>
-                {% endif %}
+        <nav class="ons-toc" aria-label="{{ params.ariaLabel | default('Table of contents') }}">
+            <h2 class="ons-toc__title ons-u-fs-r--b ons-u-mb-s">{{ params.title }}</h2>
+            {% if params.lists %}
+                {% for list in params.lists %}
+                    {% if list.listHeading %}
+                        <h3 class="ons-u-fs-r ons-u-mb-xs">
+                            {{ list.listHeading }}<span class="ons-u-vh"> {{ list.listHeadingHidden }}</span>:
+                        </h3>
+                    {% endif %}
+                    {{
+                        onsList({
+                            "element": 'ol',
+                            "classes": 'ons-u-mb-m',
+                            "variants": 'dashed',
+                            "itemsList": list.itemsList
+                        })
+                    }}
+                {% endfor %}
+            {% elif params.itemsList %}
                 {{
                     onsList({
                         "element": 'ol',
                         "classes": 'ons-u-mb-m',
                         "variants": 'dashed',
-                        "itemsList": list.itemsList
+                        "itemsList": params.itemsList
                     })
                 }}
-            {% endfor %}
-        {% elif params.itemsList %}
-            {{
-                onsList({
-                    "element": 'ol',
-                    "classes": 'ons-u-mb-m',
-                    "variants": 'dashed',
-                    "itemsList": params.itemsList
-                })
-            }}
-        {% endif %}
-    </nav>
-</aside>
+            {% endif %}
+        </nav>
+    </aside>
 {% endmacro %}

package/components/table-of-contents/example-table-of-contents-grouped.njk

@@ -47,4 +47,4 @@
             }
         ]
     })
-}}
+-}}

package/components/table-of-contents/example-table-of-contents-single.njk

@@ -36,4 +36,4 @@
             }
         ]
     })
-}}
+-}}