ui: Disclosure Component (#12263)

ui/packages/consul-ui/app/components/disclosure/README.mdx

@@ -0,0 +1,60 @@
+# Disclosure
+
+A component which can be used to implement an aria Disclosure pattern.
+
+The disclosure exports an Action component already configured for use. But if
+you want to contruct your own trigger, disclosure has all the properties to
+enable you to do so.
+
+You should make use of the `disclosure.panel` property in order to 'tag' the
+disclosure panel you are using.
+
+Clicking outside will not close the disclosure by default, if you require this
+functionality please combine with our `{{on-outside 'click'}}` modifier (see example).
+
+```hbs preview-template
+<Disclosure>
+  <:button as |disclosure|>
+    <disclosure.Action
+      {{on-outside 'click' disclosure.close}}
+      {{on 'click' disclosure.toggle}}
+    >
+      {{if disclosure.expanded "Close" "Open"}}
+    </disclosure.Action>
+  </:button>
+  <:panel as |disclosure|>
+    <p
+      id={{disclosure.panel}}
+    >
+      Disclose Me!
+    </p>
+  </:panel>
+</Disclosure>
+```
+
+## Exported API
+
+| Name | Type | Description |
+| --- | --- | --- |
+| `Action` | `GlimmerComponent` | A contextual '<Action />' component with aria attributes correctly applied, please note you still need to add an 'on' modifier here so you can control whether it opens on click/hover etc |
+| `open` | `Function` | Open the disclosure if its not already open |
+| `close` | `Function` | Close the disclosure if its not already closed |
+| `toggle` | `Function` | Toggle the open/close state of the disclosure |
+| `expanded` | `Boolean` | Whether the disclosure is 'expanded' or not |
+| `event` | `Boolean` | The event used to change the state of the disclosure |
+| `button` | `string` | An id to use on the trigger for the disclosure |
+| `panel` | `string` | An id to use on the panel for the disclosure |
+
+## Slots
+
+| Name | Description |
+| --- | --- |
+| `button` | Provides a configurable slot in which to add your open/close trigger |
+| `panel` | Provides a configurable slot in which to add your disclosed content |
+
+## See
+
+- [Component Source Code](./index.js)
+- [Template Source Code](./index.hbs)
+
+---

ui/packages/consul-ui/app/components/disclosure/action/index.hbs

@@ -0,0 +1,8 @@
+<Action
+  aria-expanded={{if @disclosure.expanded 'true' 'false'}}
+  aria-controls={{@disclosure.panel}}
+  id={{@disclosure.button}}
+  ...attributes
+>
+  {{yield}}
+</Action>

ui/packages/consul-ui/app/components/disclosure/index.hbs

@@ -0,0 +1,29 @@
+<StateChart
+  @src={{state-chart 'boolean'}}
+as |State Guard Action dispatch state|>
+{{#let (hash
+  toggle=(fn dispatch 'TOGGLE')
+  close=(fn dispatch 'FALSE')
+  open=(fn dispatch 'TRUE')
+  expanded=(state-matches state 'true')
+  event=state.context
+  button=(unique-id)
+  panel=(unique-id)
+) as |_api|}}
+  {{#let (assign _api (hash
+    Action=(component 'disclosure/action' disclosure=_api)
+  )) as |api|}}
+    <div
+      class={{class-map
+        'disclosure'
+      }}
+      ...attributes
+    >
+      {{yield api to="button"}}
+      <State @matches="true">
+        {{yield api to="panel"}}
+      </State>
+    </div>
+  {{/let}}
+{{/let}}
+</StateChart>

ui/packages/consul-ui/app/components/state-chart/index.js

@@ -61,14 +61,15 @@ export default Component.extend({
     delete this._guards[name];
   },
   dispatch: function(eventName, payload) {
-    this.machine.send(eventName, payload);
+    this.machine.state.context = payload;
+    this.machine.send({ type: eventName });
   },
   actions: {
     dispatch: function(eventName, e) {
       if (e && e.preventDefault) {
         e.preventDefault();
       }
-      this.dispatch(eventName);
+      this.dispatch(eventName, e);
     },
   },
 });

ui/packages/consul-ui/app/machines/boolean.xstate.js

@@ -0,0 +1,34 @@
+export default {
+  id: 'boolean',
+  initial: 'false',
+  states: {
+    true: {
+      on: {
+        TOGGLE: [
+          {
+            target: 'false',
+          },
+        ],
+        FALSE: [
+          {
+            target: 'false',
+          },
+        ],
+      },
+    },
+    false: {
+      on: {
+        TOGGLE: [
+          {
+            target: 'true',
+          },
+        ],
+        TRUE: [
+          {
+            target: 'true',
+          },
+        ],
+      },
+    },
+  },
+};

ui/packages/consul-ui/app/services/state-with-charts.js

@@ -1,10 +1,11 @@
 import StateService from 'consul-ui/services/state';
 
 import validate from 'consul-ui/machines/validate.xstate';
+import _boolean from 'consul-ui/machines/boolean.xstate';
 
 export default class ChartedStateService extends StateService {
   stateCharts = {
-    'validate': validate
+    validate: validate,
+    boolean: _boolean,
   };
 }
-