navody-digital-frontend/govuk/components/accordion/fixtures.json

Navody.Digital Frontend contains the code you need to start building a user interface for navody.digital

{
    "component": "accordion",
    "fixtures": [
        {
            "name": "default",
            "options": {
                "id": "default-example",
                "items": [
                    {
                        "heading": {
                            "text": "Section A"
                        },
                        "content": {
                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
                        }
                    },
                    {
                        "heading": {
                            "text": "Section B"
                        },
                        "content": {
                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
                        }
                    }
                ]
            },
            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"default-example\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"default-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-1\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"default-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"default-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"default-example-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>",
            "hidden": false
        },
        {
            "name": "with additional descriptions",
            "options": {
                "id": "with-descriptions",
                "items": [
                    {
                        "heading": {
                            "text": "Test"
                        },
                        "summary": {
                            "text": "Additional description"
                        },
                        "content": {
                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
                        }
                    },
                    {
                        "heading": {
                            "text": "Test 2"
                        },
                        "summary": {
                            "html": "<span class=\"govuk-!-font-weight-regular\">Additional description</span>"
                        },
                        "content": {
                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
                        }
                    }
                ]
            },
            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-descriptions\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-1\">\n              Test\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-1\">\n              Additional description\n            </div>\n          \n        </div>\n        <div id=\"with-descriptions-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-1\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-descriptions-heading-2\">\n              Test 2\n            </span>\n          </h2>\n          \n            <div class=\"govuk-accordion__section-summary govuk-body\" id=\"with-descriptions-summary-2\">\n              <span class=\"govuk-!-font-weight-regular\">Additional description</span>\n            </div>\n          \n        </div>\n        <div id=\"with-descriptions-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-descriptions-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>",
            "hidden": false
        },
        {
            "name": "with one section open",
            "options": {
                "id": "one-section-open-example",
                "items": [
                    {
                        "heading": {
                            "text": "Section A"
                        },
                        "expanded": true,
                        "content": {
                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
                        }
                    },
                    {
                        "heading": {
                            "text": "Section B"
                        },
                        "content": {
                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
                        }
                    }
                ]
            },
            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"one-section-open-example\">\n  \n    \n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"one-section-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-1\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"one-section-open-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"one-section-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"one-section-open-example-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>",
            "hidden": false
        },
        {
            "name": "with all sections already open",
            "options": {
                "id": "all-sections-open-example",
                "items": [
                    {
                        "heading": {
                            "text": "Section A"
                        },
                        "expanded": true,
                        "content": {
                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n"
                        }
                    },
                    {
                        "heading": {
                            "text": "Section B"
                        },
                        "expanded": true,
                        "content": {
                            "html": "<ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n"
                        }
                    }
                ]
            },
            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"all-sections-open-example\">\n  \n    \n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"all-sections-open-example-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-1\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 1</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section govuk-accordion__section--expanded\">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"all-sections-open-example-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"all-sections-open-example-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"all-sections-open-example-heading-2\">\n          <ul class=\"govuk-list govuk-list--bullet\">\n  <li>Example item 2</li>\n</ul>\n\n        </div>\n      </div>\n    \n  \n</div>",
            "hidden": false
        },
        {
            "name": "with focusable elements inside",
            "options": {
                "id": "with-focusable-elements",
                "items": [
                    {
                        "heading": {
                            "text": "Section A"
                        },
                        "content": {
                            "html": "<a class=\"govuk-link\" href=\"#\">Link A</a>"
                        }
                    },
                    {
                        "heading": {
                            "text": "Section B"
                        },
                        "content": {
                            "html": "<a class=\"govuk-link\" href=\"#\">Link B</a>"
                        }
                    }
                ]
            },
            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"with-focusable-elements\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"with-focusable-elements-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-1\">\n          <a class=\"govuk-link\" href=\"#\">Link A</a>\n        </div>\n      </div>\n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"with-focusable-elements-heading-2\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"with-focusable-elements-content-2\" class=\"govuk-accordion__section-content\" aria-labelledby=\"with-focusable-elements-heading-2\">\n          <a class=\"govuk-link\" href=\"#\">Link B</a>\n        </div>\n      </div>\n    \n  \n</div>",
            "hidden": false
        },
        {
            "name": "classes",
            "options": {
                "id": "accordion-classes",
                "classes": "myClass",
                "items": [
                    {
                        "heading": {
                            "text": "Section A"
                        },
                        "content": {
                            "text": "Some content"
                        }
                    }
                ]
            },
            "html": "<div class=\"govuk-accordion myClass\" data-module=\"govuk-accordion\" id=\"accordion-classes\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-classes-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-classes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-classes-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>",
            "hidden": true
        },
        {
            "name": "attributes",
            "options": {
                "id": "accordion-attributes",
                "attributes": {
                    "data-attribute": "value"
                },
                "items": [
                    {
                        "heading": {
                            "text": "Section A"
                        },
                        "content": {
                            "text": "Some content"
                        }
                    }
                ]
            },
            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-attributes\" data-attribute=\"value\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-attributes-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-attributes-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-attributes-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>",
            "hidden": true
        },
        {
            "name": "custom heading level",
            "options": {
                "id": "accordion-heading",
                "headingLevel": 3,
                "items": [
                    {
                        "heading": {
                            "text": "Section A"
                        },
                        "content": {
                            "text": "Some content"
                        }
                    }
                ]
            },
            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h3 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-heading-1\">\n              Section A\n            </span>\n          </h3>\n          \n        </div>\n        <div id=\"accordion-heading-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>",
            "hidden": true
        },
        {
            "name": "heading html",
            "options": {
                "id": "accordion-heading-html",
                "items": [
                    {
                        "heading": {
                            "html": "<span class=\"myClass\">Section A</span>"
                        },
                        "content": {
                            "text": "Some content"
                        }
                    }
                ]
            },
            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-heading-html\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-heading-html-heading-1\">\n              <span class=\"myClass\">Section A</span>\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-heading-html-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-heading-html-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>",
            "hidden": true
        },
        {
            "name": "with falsey values",
            "options": {
                "id": "accordion-falsey",
                "items": [
                    {
                        "heading": {
                            "text": "Section A"
                        },
                        "content": {
                            "text": "Some content"
                        }
                    },
                    false,
                    "",
                    null,
                    {
                        "heading": {
                            "text": "Section B"
                        },
                        "content": {
                            "text": "Some content"
                        }
                    }
                ]
            },
            "html": "<div class=\"govuk-accordion\" data-module=\"govuk-accordion\" id=\"accordion-falsey\">\n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-1\">\n              Section A\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-falsey-content-1\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-heading-1\">\n          Some content\n        </div>\n      </div>\n    \n  \n    \n  \n    \n  \n    \n  \n    \n      <div class=\"govuk-accordion__section \">\n        <div class=\"govuk-accordion__section-header\">\n          <h2 class=\"govuk-accordion__section-heading\">\n            <span class=\"govuk-accordion__section-button\" id=\"accordion-falsey-heading-5\">\n              Section B\n            </span>\n          </h2>\n          \n        </div>\n        <div id=\"accordion-falsey-content-5\" class=\"govuk-accordion__section-content\" aria-labelledby=\"accordion-falsey-heading-5\">\n          Some content\n        </div>\n      </div>\n    \n  \n</div>",
            "hidden": true
        }
    ]
}