Add example for PO approval (#515)

* add example for po approval * added documentation * made id unique * Update src/components/details/index.njk Co-Authored-By: Ben Meyrick <[email protected]> * Update src/components/details/_macro-options.md Co-Authored-By: Ben Meyrick <[email protected]>
ONSdigital · Jul 9, 2019 · 124d918 · 124d918
1 parent 72f0ec8
commit 124d918
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 0 deletions.
diff --git a/src/components/details/_macro-options.md b/src/components/details/_macro-options.md
@@ -5,6 +5,7 @@
 | content           | string          | true     | HTML content for the details                                                |
 | button            | `DetailsButton` | false    | Settings for the close button. If not specified button will not render      |
 | classes           | string          | false    | Classes to add to the details element                                       |
+| saveState         | boolean          | false    | Allows saving of details state (open or closed) localy                      |
 | attributes        | object          | false    | HTML attributes (for example data attributes) to add to the details element |
 | summaryAttributes | object          | false    | HTML attributes (for example data attributes) to add to the summary element |
 

diff --git a/src/components/details/examples/details-with-save/index.njk b/src/components/details/examples/details-with-save/index.njk
@@ -0,0 +1,13 @@
+{% from "components/details/_macro.njk" import onsDetails %}
+
+{{
+    onsDetails({
+        "id": "details-with-save",
+        "title": "What is a photovoltaic system?",
+        "content": "<p>A typical photovoltaic system employs solar panels, each comprising a number of solar cells, which generate electrical power. PV installations may be ground-mounted, rooftop mounted or wall mounted. The mount may be fixed, or use a solar tracker to follow the sun across the sky.</p>",
+        "button": {
+            "close": "Hide this"
+        },
+        "saveState": "true"
+    })
+}}
diff --git a/src/components/details/index.njk b/src/components/details/index.njk
@@ -37,6 +37,10 @@ Don't use the details component to hide information that the majority of your us
 [Accordions](/components/accordion), [tabs](/components/tabs) and details all hide sections of content which a user can show or hide.
 
 Use the details component instead of [tabs](/components/tabs) or [accordions](/components/accordion) if there is only one section of content that needs to be condensed.
+## Details with save state enabled
+{{
+    patternlibExample({"path": "components/details/examples/details-with-save/index.njk"})
+}}
 
 ## How to use this component
 The details component uses JavaScript so when it's turned off, the section of content is expanded and displayed as a standard heading and paragraph.