Helios docs site - Add example to Accordion docs for persisting item state (#3367)

Co-authored-by: Cristiano Rastelli <cristiano.rastelli@hashicorp.com>

Author: KristinLBradley

website/docs/components/accordion/index.js

@@ -6,12 +6,33 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
+import { service } from '@ember/service';
 
+const STORAGE_KEY = 'website:accordion:item-2-state';
 export default class Index extends Component {
-  @tracked state = 'close';
+  @tracked accordionState = 'close'; // for expand/collapse all example
+  @tracked itemState; // for persisting item state example
+  @service fastboot;
 
+  // Store Item state in session storage to persist across page reloads
+  constructor(owner, args) {
+    super(owner, args);
+    if (!this.fastboot.isFastBoot) {
+      this.itemState = sessionStorage.getItem(STORAGE_KEY) ?? 'open';
+    }
+  }
+
+  // handle Accordion expand/collapse all
+  @action
+  toggleAccordionState() {
+    this.accordionState = this.accordionState === 'open' ? 'close' : 'open';
+  }
+
+  // handle Item toggle and persist state in session storage
   @action
-  toggleState() {
-    this.state = this.state === 'open' ? 'close' : 'open';
+  onItemToggle() {
+    this.itemState = this.itemState === 'open' ? 'close' : 'open';
+    sessionStorage.setItem(STORAGE_KEY, this.itemState);
   }
 }
+

website/docs/components/accordion/partials/code/how-to-use.md

@@ -147,12 +147,12 @@ The `@forceState` argument enables you to implement expand/collapse all function
   <div class="doc-accordion-flex-layout">
     <Hds::Text::Display @size="300">Examination period</Hds::Text::Display>
     <Hds::Button
-      @text={{if (eq this.state "open") "Collapse all" "Expand all"}}
-      @icon={{if (eq this.state "open") "unfold-close" "unfold-open"}}
-      @color="tertiary" @size="small" {{on "click" this.toggleState}}
+      @text={{if (eq this.accordionState "open") "Collapse all" "Expand all"}}
+      @icon={{if (eq this.accordionState "open") "unfold-close" "unfold-open"}}
+      @color="tertiary" @size="small" {{on "click" this.toggleAccordionState}}
     />
   </div>
-  <Hds::Accordion @forceState={{this.state}} as |A|>
+  <Hds::Accordion @forceState={{this.accordionState}} as |A|>
     <A.Item>
       <:toggle>Exam experience</:toggle>
       <:content>
@@ -186,6 +186,55 @@ The `@forceState` argument enables you to implement expand/collapse all function
   </Hds::Accordion>
 ```
 
+### Persist Item state
+
+The `@forceState` argument can be used to programmatically control individual Accordion Items. For example, use `@onClickToggle` to respond to the user’s click, save the open/close state, then use `@forceState` to persist the state if the screen refreshes.
+
+```handlebars
+  <Hds::Accordion as |A|>
+    <A.Item>
+      <:toggle>Item one</:toggle>
+      <:content>
+        Additional content for item one
+      </:content>
+    </A.Item>
+    <A.Item
+      @onClickToggle={{this.onItemToggle}} 
+      @forceState={{this.itemState}}
+    >
+      <:toggle>Item two</:toggle>
+      <:content>
+        Item open on page load. Click to close then refresh the window. 
+        The Item will remember its state and remain closed.
+      </:content>
+    </A.Item>
+    <A.Item>
+      <:toggle>Item three</:toggle>
+      <:content>
+        Additional content for item three
+      </:content>
+    </A.Item>
+  </Hds::Accordion>
+```
+
+#### JavaScript code
+
+```javascript{data-execute=false}
+  @tracked itemState;
+
+  // Store Item state in session storage to persist across page reloads
+  constructor(owner, args) {
+    super(owner, args);
+    this.itemState = sessionStorage.getItem(STORAGE_KEY) ?? 'open';
+  }
+
+  @action
+  onItemToggle() {
+    this.itemState = this.itemState === 'open' ? 'close' : 'open';
+    sessionStorage.setItem(STORAGE_KEY, this.itemState);
+  }
+```
+
 ### Accessible name
 
 The `ariaLabel` value is applied to the HTML button which controls visibility of the content block. The text does not display in the UI. The default value is "Toggle display" but you can set a custom value useful for translated text for example.