@ons/design-system 62.0.1 → 62.1.0

package/components/button/example-button-download.njk

@@ -0,0 +1,9 @@
+{% from "components/button/_macro.njk" import onsButton %}
+{{
+    onsButton({
+        "text": 'Save answers as PDF',
+        "url": '#0',
+        "variants": ['download', 'small', 'secondary'],
+        "removeDownloadAttribute": true
+    })
+}}

package/components/button/example-button-ghost.njk

@@ -0,0 +1,15 @@
+---
+fullWidth: true
+---
+{% from "components/button/_macro.njk" import onsButton %}
+<div style="padding: 1.5rem; background: #206095">
+    {{
+        onsButton({
+            "text": 'Save and sign out',
+            "url": '#0',
+            "variants": 'ghost',
+            "iconType": "exit",
+            "iconPosition": "after"
+        })
+    }}
+</div>

package/components/button/example-button-group.njk

@@ -0,0 +1,16 @@
+{% from "components/button/_macro.njk" import onsButton %}
+
+<div class="ons-btn-group">
+    {{
+        onsButton({
+            "text": 'Continue'
+        })
+    }}
+    {{
+        onsButton({
+            "type": 'button',
+            "text": 'Cancel',
+            "variants": 'secondary'
+        })
+    }}
+</div>

package/components/button/example-button-link.njk

@@ -0,0 +1,7 @@
+{% from "components/button/_macro.njk" import onsButton %}
+{{
+    onsButton({
+        "text": 'Get started',
+        "url": '#0'
+    })
+}}

package/components/button/example-button-loader.njk

@@ -0,0 +1,9 @@
+{% from "components/button/_macro.njk" import onsButton %}
+<form onsubmit="return false;">
+    {{
+        onsButton({
+            "text": 'Submit',
+            "variants": 'loader'
+        })
+    }}
+</form>

package/components/button/example-button-new-window.njk

@@ -0,0 +1,12 @@
+{% from "components/button/_macro.njk" import onsButton %}
+{{
+    onsButton({
+        "text": 'Web chat',
+        "url": '/patterns/send-a-web-form/examples/form/',
+        "newWindow": true,
+        "newWindowDescription": 'opens in a new window',
+        "attributes": {
+            "onclick": "window.open(this.href,'targetWindow','toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=360,height=680'); return false;"
+        }
+    })
+}}

package/components/button/example-button-print.njk

@@ -0,0 +1,8 @@
+{% from "components/button/_macro.njk" import onsButton %}
+
+{{
+    onsButton({
+        "text": 'Print this page',
+        "variants": ['print', 'small', 'secondary']
+    })
+}}

package/components/button/example-button-secondary-small.njk

@@ -0,0 +1,8 @@
+{% from "components/button/_macro.njk" import onsButton %}
+{{
+    onsButton({
+        "type": 'button',
+        "text": 'Add',
+        "variants": ['secondary', 'small']
+    })
+}}

package/components/button/example-button-secondary.njk

@@ -0,0 +1,8 @@
+{% from "components/button/_macro.njk" import onsButton %}
+{{
+    onsButton({
+        "type": 'button',
+        "text": 'Add a person',
+        "variants": 'secondary'
+    })
+}}

package/components/button/example-button-small.njk

@@ -0,0 +1,8 @@
+{% from "components/button/_macro.njk" import onsButton %}
+{{
+    onsButton({
+        "type": 'button',
+        "text": 'Add',
+        "variants": 'small'
+    })
+}}

package/components/button/example-button-timer.njk

@@ -0,0 +1,9 @@
+{% from "components/button/_macro.njk" import onsButton %}
+<form onsubmit="return false;">
+    {{
+        onsButton({
+            "text": 'Submit',
+            "variants": 'timer'
+        })
+    }}
+</form>

package/components/button/example-button.njk

@@ -0,0 +1,6 @@
+{% from "components/button/_macro.njk" import onsButton %}
+{{
+    onsButton({
+        "text": "Save and continue"
+    })
+}}

package/components/call-to-action/example-call-to-action-default.njk

@@ -0,0 +1,14 @@
+---
+"fullWidth": true
+---
+{% from "components/call-to-action/_macro.njk" import onsCallToAction %}
+{{-
+    onsCallToAction({
+        "headingText": 'Call to action heading.',
+        "paragraphText": 'Descriptive text about call to action',
+        "button": {
+            "text": 'Start',
+            "url": '#0'
+        }
+    })
+}}

package/components/card/example-card-set-with-images.njk

@@ -0,0 +1,41 @@
+{% from "components/card/_macro.njk" import onsCard %}
+<div class="ons-container">
+
+    <div class="ons-grid ons-grid--column@xxs@s">
+
+        <div class="ons-grid__col ons-col-4@m">
+            {{ onsCard({
+                "id": 'title1',
+                "textId": 'text1',
+                "title": 'About the census',
+                "url": '#0',
+                "text": 'The census is a survey that gives us information about all the households in England and Wales.',
+                "image": true
+            }) }}
+        </div>
+
+        <div class="ons-grid__col ons-col-4@m">
+            {{ onsCard({
+                "id": 'title2',
+                "textId": 'text2',
+                "title": 'Working on the census',
+                "url": '#0',
+                "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.',
+                "image": true
+            }) }}
+        </div>
+
+        <div class="ons-grid__col ons-col-4@m">
+            {{ onsCard({
+                "id": 'title3',
+                "textId": 'text3',
+                "title": 'Your data and security',
+                "url": '#0',
+                "text": 'How we keep your data safe and what happens to your personal information.',
+                "image": true
+            }) }}
+        </div>
+
+    </div>
+    
+</div>

package/components/card/example-card-set-with-lists.njk

@@ -0,0 +1,68 @@
+{% from "components/card/_macro.njk" import onsCard %}
+<div class="ons-container">
+    
+    <div class="ons-grid ons-grid--column@xxs@s">
+       
+        <div class="ons-grid__col ons-col-4@m">
+            {{ onsCard({
+                "id": 'title1',
+                "textId": 'text1',
+                "title": 'About the census',
+                "url": '#0',
+                "text": 'The census is a survey that gives us information about all the households in England and Wales.',
+                "itemsList": [
+                    {
+                        "url": '#0',
+                        "text": 'List item 1'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'List item 2'
+                    }
+                ]
+            }) }}
+        </div>
+
+        <div class="ons-grid__col ons-col-4@m">
+            {{ onsCard({
+                "id": 'title2',
+                "textId": 'text2',
+                "title": 'Working on the census',
+                "url": '#0',
+                "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.',
+                "itemsList": [
+                    {
+                        "url": '#0',
+                        "text": 'List item 1'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'List item 2'
+                    }
+                ]
+            }) }}
+        </div>
+
+        <div class="ons-grid__col ons-col-4@m">
+            {{ onsCard({
+                "id": 'title3',
+                "textId": 'text3',
+                "title": 'Your data and security',
+                "url": '#0',
+                "text": 'How we keep your data safe and what happens to your personal information.',
+                "itemsList": [
+                    {
+                        "url": '#0',
+                        "text": 'List item 1'
+                    },
+                    {
+                        "url": '#0',
+                        "text": 'List item 2'
+                    }
+                ]
+            }) }}
+        </div>
+
+    </div>
+    
+</div>

package/components/card/example-card-set.njk

@@ -0,0 +1,38 @@
+{% from "components/card/_macro.njk" import onsCard %}
+<div class="ons-container">
+    
+    <div class="ons-grid ons-grid--column@xxs@s">
+       
+        <div class="ons-grid__col ons-col-4@m">
+            {{ onsCard({
+                "id": 'title1',
+                "textId": 'text1',
+                "title": 'About the census',
+                "url": '#0',
+                "text": 'The census is a survey that gives us information about all the households in England and Wales.'
+            }) }}
+        </div>
+
+        <div class="ons-grid__col ons-col-4@m">
+            {{ onsCard({
+                "id": 'title2',
+                "textId": 'text2',
+                "title": 'Working on the census',
+                "url": '#0',
+                "text": 'For Census 2021, we’ll be hiring at least 30,000 field staff across England and Wales.'
+            }) }}
+        </div>
+
+        <div class="ons-grid__col ons-col-4@m">
+            {{ onsCard({
+                "id": 'title3',
+                "textId": 'text3',
+                "title": 'Your data and security',
+                "url": '#0',
+                "text": 'How we keep your data safe and what happens to your personal information.'
+            }) }}
+        </div>
+
+    </div>
+    
+</div>

package/components/card/example-card.njk

@@ -0,0 +1,9 @@
+{% from "components/card/_macro.njk" import onsCard %}
+
+{{ onsCard({
+    "id": 'title',
+    "textId": 'text',
+    "title": 'Your data and security',
+    "url": '#0',
+    "text": 'How we keep your data safe and what happens to your personal information.'
+}) }}

package/components/checkboxes/example-checkboxes-disabled.njk

@@ -0,0 +1,34 @@
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+    {{
+        onsCheckboxes({
+            "legend": "Content type",
+            "checkboxesLabel": "Show only:",
+            "borderless": true,
+            "name": "dietary",
+            "checkboxes": [
+                {
+                    "id": "data",
+                    "label": {
+                        "text": "Data (309)"
+                    },
+                    "value": "data"
+                },
+                {
+                    "id": "publications",
+                    "label": {
+                        "text": "Publications (137)"
+                    },
+                    "value": "publications"
+                },
+                {
+                    "id": "areas",
+                    "label": {
+                        "text": "Areas (0)"
+                    },
+                    "value": "areas",
+                    "disabled": true
+                }
+            ]
+        })
+    }}

package/components/checkboxes/example-checkboxes-error.njk

@@ -0,0 +1,60 @@
+
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+
+{{
+    onsCheckboxes({
+        "checkboxesLabel": "Select all that apply",
+        "name": "dietary",
+        "dontWrap": true,
+        "checkboxes": [
+            {
+                "id": "gluten-free",
+                "label": {
+                    "text": "Gluten free"
+                },
+                "value": "gluten-free"
+            },
+            {
+                "id": "lactose-intolerant",
+                "label": {
+                    "text": "Lactose intolerant"
+                },
+                "value": "lactose-intolerant"
+            },
+            {
+                "id": "vegan",
+                "label": {
+                    "text": "Vegan"
+                },
+                "value": "vegan"
+            },
+            {
+                "id": "vegetarian",
+                "label": {
+                    "text": "Vegetarian"
+                },
+                "value": "vegetarian"
+            },
+            {
+                "id": "other-checkbox",
+                "label": {
+                    "text": "Other"
+                },
+                "checked": true,
+                "value": "other",
+                "other": {
+                    "id": "other-textbox",
+                    "name": "other-answer",
+                    "label": {
+                        "text": "Enter dietary requirements"
+                    }
+                }
+            }
+        ],
+        "error": {
+            "classes": "test",
+            "id": "dietary-error",
+            "text": "Enter your dietary requirements"
+        }
+    })
+}}

package/components/checkboxes/example-checkboxes-with-descriptions.njk

@@ -0,0 +1,71 @@
+{% from "components/checkboxes/_macro.njk" import onsCheckboxes %}
+{% from "components/question/_macro.njk" import onsQuestion %}
+
+{% call onsQuestion({
+    "title": "What type of central heating does your accommodation have?",
+    "classes": "ons-u-mt-no",
+    "legendIsQuestionTitle": true
+}) %}
+    {{
+        onsCheckboxes({
+            "dontWrap": true,
+            "name": "central-heating",
+            "checkboxes": [
+                {
+                    "id": "none",
+                    "label": {
+                        "text": "No central heating"
+                    },
+                    "name": "none"
+                },
+                {
+                    "id": "mains-gas",
+                    "label": {
+                        "text": "Gas",
+                        "description": "Including tank or bottled gas"
+                    },
+                    "name": "mains-gas"
+                },
+                {
+                    "id": "electric",
+                    "label": {
+                        "text": "Electric",
+                        "description": "Including storage headers"
+                    },
+                    "name": "electric"
+                },
+                {
+                    "id": "oil",
+                    "label": {
+                        "text": "Oil"
+                    },
+                    "name": "oil"
+                },
+                {
+                    "id": "wood",
+                    "label": {
+                        "text": "Wood",
+                        "description": "For example, logs, waste wood or pellets"
+                    },
+                    "name": "wood"
+                },
+                {
+                    "id": "solid-fuel",
+                    "label": {
+                        "text": "Solid fuel",
+                        "description": "For example, coal"
+                    },
+                    "name": "solid-fuel"
+                },
+                {
+                    "id": "renewable",
+                    "label": {
+                        "text": "Renewable energy",
+                        "description": "For example, solar thermal or heat pumps"
+                    },
+                    "name": "renewable"
+                }
+            ]
+        })
+    }}
+{% endcall %}

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

@@ -0,0 +1,177 @@
+{% 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>
+
+    <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",
+                                    "hideLabel": true,
+                                    "label": {
+                                        "text": "View surveys"
+                                    },
+                                    "value": "y",
+                                    "checked": true,
+                                    "disabled": true
+                                })
+                            }}
+                        </td>
+                        <td class="ons-table__cell" colspan="2">
+                            {{
+                                onsCheckbox({
+                                    "id": "surveys-edit",
+                                    "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",
+                                    "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",
+                                    "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",
+                                    "hideLabel": true,
+                                    "label": {
+                                        "text": "View respondents"
+                                    },
+                                    "value": "y",
+                                    "checked": true,
+                                    "disabled": true
+                                })
+                            }}
+                        </td>
+                        <td class="ons-table__cell">
+                            {{
+                                onsCheckbox({
+                                    "id": "respondents-edit",
+                                    "hideLabel": true,
+                                    "label": {
+                                        "text": "Edit respondents"
+                                    },
+                                    "value": "y",
+                                    "checked": true
+                                })
+                            }}
+                        </td>
+                        <td class="ons-table__cell">
+                            {{
+                                onsCheckbox({
+                                    "id": "respondents-delete",
+                                    "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",
+                                    "hideLabel": true,
+                                    "label": {
+                                        "text": "View messages"
+                                    },
+                                    "value": "y",
+                                    "checked": true,
+                                    "disabled": true
+                                })
+                            }}
+                        </td>
+                        <td class="ons-table__cell" colspan="2">
+                            {{
+                                onsCheckbox({
+                                    "id": "messages-edit",
+                                    "hideLabel": true,
+                                    "label": {
+                                        "text": "Edit messages"
+                                    },
+                                    "value": "y",
+                                    "checked": true
+                                })
+                            }}
+                        </td>
+                    </tr>
+                </tbody>
+            </table>
+        </section>
+    </form>