@ons/design-system 70.0.8 → 70.0.9

package/components/checkboxes/example-checkboxes-with-hidden-label.njk

@@ -1,177 +1,169 @@
 {% from "components/checkboxes/_checkbox-macro.njk" import onsCheckbox %}
 
 <div class="ons-grid ons-grid--flex ons-grid--between">
-        <div class="ons-grid__col">
-            <h1 class="ons-u-fs-l u-mb-xs" name="page-manage-account-title">{{ name }}</h1>
-        </div>
+    <div class="ons-grid__col">
+        <h1 class="ons-u-fs-l u-mb-xs" name="page-manage-account-title">{{ name }}</h1>
     </div>
+</div>
 
-    <div class="ons-grid ons-grid--flex ons-grid--between">
-        <div class="ons-grid__col">
-            <h2 class="ons-u-fs-m u-mb-xs" name="page-manage-account-subtitle">Select user permissions</h2>
-        </div>
+<div class="ons-grid ons-grid--flex ons-grid--between">
+    <div class="ons-grid__col">
+        <h2 class="ons-u-fs-m u-mb-xs" name="page-manage-account-subtitle">Select user permissions</h2>
     </div>
+</div>
 
-    <form id="user-permissions" action="" method="post">
-        <input type="hidden" name="csrf_token" value="" />
-        <section class="ons-u-mt-s">
-            <table id="tbl-users" class="ons-table" >
-                <thead class="ons-table__head">
-                    <tr class="ons-table__row">
-                        <th scope="col" class="ons-table__header">
-                            <span>Survey Data Collection area</span>
-                        </th>
-                        <th scope="col" class="ons-table__header">
-                            <span>View</span>
-                        </th>
-                        <th scope="col" class="ons-table__header">
-                            <span>Edit</span>
-                        </th>
-                        <th scope="col" class="ons-table__header">
-                            <span>Delete</span>
-                        </th>
-                    </tr>
-                </thead>
-                <tbody class="ons-table__body">
-                    <tr class="ons-table__row">
-                        <td class="ons-table__cell">
-                            Surveys
-                        </td>
-                        <td class="ons-table__cell">
-                            {{
-                                onsCheckbox({
-                                    "id": "surveys-view-example-checkbox-with-hidden-label",
-                                    "hideLabel": true,
-                                    "label": {
-                                        "text": "View surveys"
-                                    },
-                                    "value": "y",
-                                    "checked": true,
-                                    "disabled": true
-                                })
-                            }}
-                        </td>
-                        <td class="ons-table__cell" colspan="2">
-                            {{
-                                onsCheckbox({
-                                    "id": "surveys-edit-example-checkbox-with-hidden-label",
-                                    "hideLabel": true,
-                                    "label": {
-                                        "text": "Edit surveys"
-                                    },
-                                    "value": "n"
-                                })
-                            }}
-                        </td>
-                    </tr>
-                    <tr class="ons-table__row">
-                        <td class="ons-table__cell">
-                            Reporting units
-                        </td>
-                        <td class="ons-table__cell">
-                            {{
-                                onsCheckbox({
-                                    "id": "reporting-units-view-example-checkbox-with-hidden-label",
-                                    "hideLabel": true,
-                                    "label": {
-                                        "text": "View reporting units"
-                                    },
-                                    "value": "y",
-                                    "checked": true,
-                                    "disabled": true
-                                })
-                            }}
-                        </td>
-                        <td class="ons-table__cell" colspan="2">
-                            {{
-                                onsCheckbox({
-                                    "id": "reporting-units-edit-example-checkbox-with-hidden-label",
-                                    "hideLabel": true,
-                                    "label": {
-                                        "text": "Edit reporting units"
-                                    },
-                                    "value": "n"
-                                })
-                            }}
-                        </td>
-                    </tr>
-                    <tr class="ons-table__row">
-                        <td class="ons-table__cell">
-                            Respondents
-                        </td>
-                        <td class="ons-table__cell">
-                            {{
-                                onsCheckbox({
-                                    "id": "respondents-view-example-checkbox-with-hidden-label",
-                                    "hideLabel": true,
-                                    "label": {
-                                        "text": "View respondents"
-                                    },
-                                    "value": "y",
-                                    "checked": true,
-                                    "disabled": true
-                                })
-                            }}
-                        </td>
-                        <td class="ons-table__cell">
-                            {{
-                                onsCheckbox({
-                                    "id": "respondents-edit-example-checkbox-with-hidden-label",
-                                    "hideLabel": true,
-                                    "label": {
-                                        "text": "Edit respondents"
-                                    },
-                                    "value": "y",
-                                    "checked": true
-                                })
-                            }}
-                        </td>
-                        <td class="ons-table__cell">
-                            {{
-                                onsCheckbox({
-                                    "id": "respondents-delete-example-checkbox-with-hidden-label",
-                                    "hideLabel": true,
-                                    "label": {
-                                        "text": "Delete respondents"
-                                    },
-                                    "value": "n"
-                                })
-                            }}
-                        </td>
-                    </tr>
-                    <tr class="ons-table__row">
-                        <td class="ons-table__cell">
-                            Messages
-                        </td>
-                        <td class="ons-table__cell">
-                            {{
-                                onsCheckbox({
-                                    "id": "messages-view-example-checkbox-with-hidden-label",
-                                    "hideLabel": true,
-                                    "label": {
-                                        "text": "View messages"
-                                    },
-                                    "value": "y",
-                                    "checked": true,
-                                    "disabled": true
-                                })
-                            }}
-                        </td>
-                        <td class="ons-table__cell" colspan="2">
-                            {{
-                                onsCheckbox({
-                                    "id": "messages-edit-example-checkbox-with-hidden-label",
-                                    "hideLabel": true,
-                                    "label": {
-                                        "text": "Edit messages"
-                                    },
-                                    "value": "y",
-                                    "checked": true
-                                })
-                            }}
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
-        </section>
-    </form>
+<form id="user-permissions" action="" method="post">
+    <input type="hidden" name="csrf_token" value="" />
+    <section class="ons-u-mt-s">
+        <table id="tbl-users" class="ons-table">
+            <thead class="ons-table__head">
+                <tr class="ons-table__row">
+                    <th scope="col" class="ons-table__header">
+                        <span>Survey Data Collection area</span>
+                    </th>
+                    <th scope="col" class="ons-table__header">
+                        <span>View</span>
+                    </th>
+                    <th scope="col" class="ons-table__header">
+                        <span>Edit</span>
+                    </th>
+                    <th scope="col" class="ons-table__header">
+                        <span>Delete</span>
+                    </th>
+                </tr>
+            </thead>
+            <tbody class="ons-table__body">
+                <tr class="ons-table__row">
+                    <td class="ons-table__cell">Surveys</td>
+                    <td class="ons-table__cell">
+                        {{
+                            onsCheckbox({
+                                "id": "surveys-view-example-checkbox-with-hidden-label",
+                                "hideLabel": true,
+                                "label": {
+                                    "text": "View surveys"
+                                },
+                                "value": "y",
+                                "checked": true,
+                                "disabled": true
+                            })
+                        }}
+                    </td>
+                    <td class="ons-table__cell" colspan="2">
+                        {{
+                            onsCheckbox({
+                                "id": "surveys-edit-example-checkbox-with-hidden-label",
+                                "hideLabel": true,
+                                "label": {
+                                    "text": "Edit surveys"
+                                },
+                                "value": "n"
+                            })
+                        }}
+                    </td>
+                </tr>
+                <tr class="ons-table__row">
+                    <td class="ons-table__cell">Reporting units</td>
+                    <td class="ons-table__cell">
+                        {{
+                            onsCheckbox({
+                                "id": "reporting-units-view-example-checkbox-with-hidden-label",
+                                "hideLabel": true,
+                                "label": {
+                                    "text": "View reporting units"
+                                },
+                                "value": "y",
+                                "checked": true,
+                                "disabled": true
+                            })
+                        }}
+                    </td>
+                    <td class="ons-table__cell" colspan="2">
+                        {{
+                            onsCheckbox({
+                                "id": "reporting-units-edit-example-checkbox-with-hidden-label",
+                                "hideLabel": true,
+                                "label": {
+                                    "text": "Edit reporting units"
+                                },
+                                "value": "n"
+                            })
+                        }}
+                    </td>
+                </tr>
+                <tr class="ons-table__row">
+                    <td class="ons-table__cell">Respondents</td>
+                    <td class="ons-table__cell">
+                        {{
+                            onsCheckbox({
+                                "id": "respondents-view-example-checkbox-with-hidden-label",
+                                "hideLabel": true,
+                                "label": {
+                                    "text": "View respondents"
+                                },
+                                "value": "y",
+                                "checked": true,
+                                "disabled": true
+                            })
+                        }}
+                    </td>
+                    <td class="ons-table__cell">
+                        {{
+                            onsCheckbox({
+                                "id": "respondents-edit-example-checkbox-with-hidden-label",
+                                "hideLabel": true,
+                                "label": {
+                                    "text": "Edit respondents"
+                                },
+                                "value": "y",
+                                "checked": true
+                            })
+                        }}
+                    </td>
+                    <td class="ons-table__cell">
+                        {{
+                            onsCheckbox({
+                                "id": "respondents-delete-example-checkbox-with-hidden-label",
+                                "hideLabel": true,
+                                "label": {
+                                    "text": "Delete respondents"
+                                },
+                                "value": "n"
+                            })
+                        }}
+                    </td>
+                </tr>
+                <tr class="ons-table__row">
+                    <td class="ons-table__cell">Messages</td>
+                    <td class="ons-table__cell">
+                        {{
+                            onsCheckbox({
+                                "id": "messages-view-example-checkbox-with-hidden-label",
+                                "hideLabel": true,
+                                "label": {
+                                    "text": "View messages"
+                                },
+                                "value": "y",
+                                "checked": true,
+                                "disabled": true
+                            })
+                        }}
+                    </td>
+                    <td class="ons-table__cell" colspan="2">
+                        {{
+                            onsCheckbox({
+                                "id": "messages-edit-example-checkbox-with-hidden-label",
+                                "hideLabel": true,
+                                "label": {
+                                    "text": "Edit messages"
+                                },
+                                "value": "y",
+                                "checked": true
+                            })
+                        }}
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+    </section>
+</form>

package/components/checkboxes/example-checkboxes-with-revealed-checkboxes-expanded.njk

@@ -1,88 +1,88 @@
 {% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
 
-    {{
-        onsCheckboxes({
-            "legend": "Content type",
-            "checkboxesLabel": "Show only:",
-            "borderless": true,
-            "name": "dietary",
-            "checkboxes": [
-                {
-                    "id": "data-example-checkbox-with-revealed-checkboxes-expanded",
-                    "label": {
-                        "text": "Data (309)"
-                    },
-                    "value": "data",
-                    "checked": true,
-                    "other": {
-                        "otherType": "checkboxes",
-                        "selectAllChildren": true,
-                        "legend": "Data type",
-                        "legendClasses": "ons-u-vh",
-                        "name": "name",
-                        "checkboxes": [
-                            {
-                                "id": "datasets-example-checkbox-with-revealed-checkboxes-expanded",
-                                "label": {
-                                    "text": "Datasets (100)"
-                                },
-                                "value": "datasets"
+{{
+    onsCheckboxes({
+        "legend": "Content type",
+        "checkboxesLabel": "Show only:",
+        "borderless": true,
+        "name": "dietary",
+        "checkboxes": [
+            {
+                "id": "data-example-checkbox-with-revealed-checkboxes-expanded",
+                "label": {
+                    "text": "Data (309)"
+                },
+                "value": "data",
+                "checked": true,
+                "other": {
+                    "otherType": "checkboxes",
+                    "selectAllChildren": true,
+                    "legend": "Data type",
+                    "legendClasses": "ons-u-vh",
+                    "name": "name",
+                    "checkboxes": [
+                        {
+                            "id": "datasets-example-checkbox-with-revealed-checkboxes-expanded",
+                            "label": {
+                                "text": "Datasets (100)"
                             },
-                            {
-                                "id": "timeseries-example-checkbox-with-revealed-checkboxes-expanded",
-                                "label": {
-                                    "text": "Timeseries (20)"
-                                },
-                                "value": "timeseries"
+                            "value": "datasets"
+                        },
+                        {
+                            "id": "timeseries-example-checkbox-with-revealed-checkboxes-expanded",
+                            "label": {
+                                "text": "Timeseries (20)"
                             },
-                            {
-                                "id": "requested-example-checkbox-with-revealed-checkboxes-expanded",
-                                "label": {
-                                    "text": "User requested data (17)"
-                                },
-                                "value": "requested"
-                            }
-                        ]
-                    }
-                },
-                {
-                    "id": "publications-example-checkbox-with-revealed-checkboxes-expanded",
-                    "label": {
-                        "text": "Publications (137)"
-                    },
-                    "value": "publications",
-                    "checked": true,
-                    "other": {
-                        "otherType": "checkboxes",
-                        "selectAllChildren": true,
-                        "legend": "Publication type",
-                        "legendClasses": "ons-u-vh",
-                        "name": "name",
-                        "checkboxes": [
-                            {
-                                "id": "press-release-example-checkbox-with-revealed-checkboxes-expanded",
-                                "label": {
-                                    "text": "Press release (100)"
-                                },
-                                "value": "pressrelease"
+                            "value": "timeseries"
+                        },
+                        {
+                            "id": "requested-example-checkbox-with-revealed-checkboxes-expanded",
+                            "label": {
+                                "text": "User requested data (17)"
                             },
-                            {
-                                "id": "bulletin-example-checkbox-with-revealed-checkboxes-expanded",
-                                "label": {
-                                    "text": "Bulletin (20)"
-                                },
-                                "value": "bulletin"
-                            }
-                        ]
-                    }
+                            "value": "requested"
+                        }
+                    ]
+                }
+            },
+            {
+                "id": "publications-example-checkbox-with-revealed-checkboxes-expanded",
+                "label": {
+                    "text": "Publications (137)"
                 },
-                {
-                    "id": "areas-example-checkbox-with-revealed-checkboxes-expanded",
-                    "label": {
-                        "text": "Areas (0)"
-                    },
-                    "value": "areas"
+                "value": "publications",
+                "checked": true,
+                "other": {
+                    "otherType": "checkboxes",
+                    "selectAllChildren": true,
+                    "legend": "Publication type",
+                    "legendClasses": "ons-u-vh",
+                    "name": "name",
+                    "checkboxes": [
+                        {
+                            "id": "press-release-example-checkbox-with-revealed-checkboxes-expanded",
+                            "label": {
+                                "text": "Press release (100)"
+                            },
+                            "value": "pressrelease"
+                        },
+                        {
+                            "id": "bulletin-example-checkbox-with-revealed-checkboxes-expanded",
+                            "label": {
+                                "text": "Bulletin (20)"
+                            },
+                            "value": "bulletin"
+                        }
+                    ]
                 }
-            ]
-        })
-    }}
+            },
+            {
+                "id": "areas-example-checkbox-with-revealed-checkboxes-expanded",
+                "label": {
+                    "text": "Areas (0)"
+                },
+                "value": "areas"
+            }
+        ]
+    })
+}}