Disclosure

import '@rhds/elements/rh-disclosure/rh-disclosure.js';

<rh-disclosure summary="Collapsed panel title">
  <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Velit distinctio, nesciunt nobis sit, a dolor, non numquam rerum recusandae, deserunt enim assumenda quidem. Id impedit necessitatibus obcaecati ratione reprehenderit laborum?</p>
</rh-disclosure>

import { Disclosure } from "@rhds/elements/react/rh-disclosure/rh-disclosure.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Disclosure summary="Collapsed panel title">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Velit distinctio, nesciunt nobis sit, a dolor, non numquam rerum recusandae, deserunt enim assumenda quidem. Id impedit necessitatibus obcaecati ratione reprehenderit laborum?</p>
  </Disclosure>
);

import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
import '@rhds/elements/rh-disclosure/rh-disclosure.js';

<rh-context-demo>
  <rh-disclosure summary="Collapsed panel title">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Velit distinctio, nesciunt nobis sit.</p>
  </rh-disclosure>
</rh-context-demo>

import { Disclosure } from "@rhds/elements/react/rh-disclosure/rh-disclosure.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <rh-context-demo>
    <Disclosure summary="Collapsed panel title">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Velit distinctio, nesciunt nobis sit.</p>
    </Disclosure>
  </rh-context-demo>
);

import '@rhds/elements/rh-disclosure/rh-disclosure.js';

const disclosure = document.querySelector('rh-disclosure');
const form = document.getElementById('disclosure-events');
const events = [];
form.addEventListener('submit', e => e.preventDefault());
const onDisclosureEvent = event => {
  events.push(event.type);
  form.elements.events.value = events.join(', ');
};
disclosure.addEventListener('toggle', onDisclosureEvent);

<form id="disclosure-events">
  <rh-disclosure summary="Collapsed panel title">
    <p>Lorem ipsum dolor <a href="#">sit amet consectetur</a> adipisicing, elit. Velit distinctio, nesciunt nobis sit, a dolor, non numquam rerum recusandae, deserunt enim assumenda quidem. Id impedit necessitatibus obcaecati ratione reprehenderit laborum?</p>
  </rh-disclosure>

  <fieldset>
    <legend>Events Fired</legend>
    <output name="events">No events yet</output>
  </fieldset>
</form>

import { Disclosure } from "@rhds/elements/react/rh-disclosure/rh-disclosure.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <form id="disclosure-events">
    <Disclosure summary="Collapsed panel title">
      <p>
        Lorem ipsum dolor
        <a href="#">sit amet consectetur</a>
        adipisicing, elit. Velit distinctio, nesciunt nobis sit, a dolor, non numquam rerum recusandae, deserunt enim assumenda quidem. Id impedit necessitatibus obcaecati ratione reprehenderit laborum?
      </p>
    </Disclosure>
    <fieldset>
      <legend>Events Fired</legend>
      <output name="events">No events yet</output>
    </fieldset>
  </form>
);

import '@rhds/elements/rh-disclosure/rh-disclosure.js';

<rh-disclosure summary="This is the top level disclosure">
  <p>Try not to nest disclosures. If nesting, consider using an accordion instead. Lorem ipsum <a href="#">dolor</a>.</p>
  <rh-disclosure summary="This is the second level disclosure">
    <p>Test using the ESC key + focus on an element when nesting disclosures. <a href="#">Fake link 2</a> and more text.</p>
    <form action="#" method="get" class="form-example" style="margin-block: var(--rh-space-md, 8px);">
      <div class="form-example">
        <label for="name">Enter your name: </label>
        <input type="text" name="name" id="name" required="">
      </div>
      <div class="form-example">
        <label for="favcity">Which is your favorite city?</label>
        <select id="favcity" name="select">
        <option value="1">Amsterdam</option>
        <option value="2">Buenos Aires</option>
        </select>
      </div>
      <div class="form-example">
        <fieldset>
        <legend>Choose a shipping method:</legend>
        <input id="overnight" type="radio" name="shipping" value="overnight">
        <label for="overnight">Overnight</label><br>
        <input id="twoday" type="radio" name="shipping" value="twoday">
        <label for="twoday">Two day</label><br>
        </fieldset>
      </div>
      <div class="form-example">
        <fieldset>
        <legend>Select your pizza toppings:</legend>
        <input id="ham" type="checkbox" name="toppings" value="ham">
        <label for="ham">Ham</label><br>
        <input id="pepperoni" type="checkbox" name="toppings" value="pepperoni">
        <label for="pepperoni">Pepperoni</label><br>
        </fieldset>
      </div>
      <div class="form-example">
        <input type="submit" value="Subscribe!">
      </div>
    </form>
    <p>This is a sentence with <a href="#">a link</a>.</p>
  </rh-disclosure>
</rh-disclosure>

import { Disclosure } from "@rhds/elements/react/rh-disclosure/rh-disclosure.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Disclosure summary="This is the top level disclosure">
    <p>
      Try not to nest disclosures. If nesting, consider using an accordion instead. Lorem ipsum
      <a href="#">dolor</a>
      .
    </p>
    <Disclosure summary="This is the second level disclosure">
      <p>
        Test using the ESC key + focus on an element when nesting disclosures.
        <a href="#">Fake link 2</a>
        and more text.
      </p>
      <form action="#" method="get" className="form-example" style="margin-block: var(--rh-space-md, 8px);">
        <div className="form-example">
<label htmlFor="name">Enter your name:</label>
<input type="text" name="name" id="name" required />
        </div>
        <div className="form-example">
<label htmlFor="favcity">Which is your favorite city?</label>
<select id="favcity" name="select">
  <option value="1">Amsterdam</option>
  <option value="2">Buenos Aires</option>
</select>
        </div>
        <div className="form-example">
<fieldset>
  <legend>Choose a shipping method:</legend>
  <input id="overnight" type="radio" name="shipping" value="overnight" />
  <label htmlFor="overnight">Overnight</label>
  <br />
  <input id="twoday" type="radio" name="shipping" value="twoday" />
  <label htmlFor="twoday">Two day</label>
  <br />
</fieldset>
        </div>
        <div className="form-example">
<fieldset>
  <legend>Select your pizza toppings:</legend>
  <input id="ham" type="checkbox" name="toppings" value="ham" />
  <label htmlFor="ham">Ham</label>
  <br />
  <input id="pepperoni" type="checkbox" name="toppings" value="pepperoni" />
  <label htmlFor="pepperoni">Pepperoni</label>
  <br />
</fieldset>
        </div>
        <div className="form-example">
<input type="submit" value="Subscribe!" />
        </div>
      </form>
      <p>
        This is a sentence with
        <a href="#">a link</a>
        .
      </p>
    </Disclosure>
  </Disclosure>
);

import '@rhds/elements/rh-disclosure/rh-disclosure.js';
import '@rhds/elements/rh-jump-links/rh-jump-links.js';

<rh-disclosure>
  <h2 slot="summary" id="sections">Sections</h2>
  <rh-jump-links aria-labelledby="sections">
    <rh-jump-link href="#section-1">Section 1</rh-jump-link>
    <rh-jump-link href="#section-2">Section 2</rh-jump-link>
    <rh-jump-link href="#section-3">Section 3</rh-jump-link>
    <rh-jump-link href="#section-4">Section 4</rh-jump-link>
    <rh-jump-link href="#section-5">Section 5</rh-jump-link>
  </rh-jump-links>
</rh-disclosure>

import { Disclosure } from "@rhds/elements/react/rh-disclosure/rh-disclosure.js";
import { JumpLink } from "@rhds/elements/react/rh-jump-link/rh-jump-link.js";
import { JumpLinks } from "@rhds/elements/react/rh-jump-links/rh-jump-links.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Disclosure>
    <h2 slot="summary" id="sections">Sections</h2>
    <JumpLinks aria-labelledby="sections">
      <JumpLink href="#section-1">Section 1</JumpLink>
      <JumpLink href="#section-2">Section 2</JumpLink>
      <JumpLink href="#section-3">Section 3</JumpLink>
      <JumpLink href="#section-4">Section 4</JumpLink>
      <JumpLink href="#section-5">Section 5</JumpLink>
    </JumpLinks>
  </Disclosure>
);

import '@rhds/elements/rh-disclosure/rh-disclosure.js';
import '@rhds/elements/rh-icon/rh-icon.js';

span.icon {
  display: inline-flex;
  align-items: center;
  gap: var(--rh-space-sm, 6px);
}

p {
  margin-block-end: var(--rh-space-lg, 16px);
}

<rh-disclosure>
  <span slot="summary" class="icon">
    This is a slotted summary with extra markup <rh-icon set="ui" icon="like"></rh-icon>
  </span>
  <p>Instead of using <code>&lt;rh-disclosure summary="Hello world"&gt;</code>, users can slot content into a <code>summary</code> slot and include additional HTML if needed.</p>
  <p>Also note that slotted <code>summary</code> content will render on the page if/when JavaScript fails to load.</p>
</rh-disclosure>

import { Disclosure } from "@rhds/elements/react/rh-disclosure/rh-disclosure.js";
import { Icon } from "@rhds/elements/react/rh-icon/rh-icon.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Disclosure>
    <span slot="summary" className="icon">
      This is a slotted summary with extra markup
      <Icon set="ui" icon="like" />
    </span>
    <p>
      Instead of using
      <code><rh-disclosure summary="Hello world"></code>
      , users can slot content into a
      <code>summary</code>
      slot and include additional HTML if needed.
    </p>
    <p>
      Also note that slotted
      <code>summary</code>
      content will render on the page if/when JavaScript fails to load.
    </p>
  </Disclosure>
);

import '@rhds/elements/rh-disclosure/rh-disclosure.js';

.container {
  max-width: var(--rh-breakpoint-md, 992px);
  margin-inline: auto;
}
rh-disclosure {
  margin-block-end: var(--rh-space-lg, 16px);
}

<div class="container">
  <rh-disclosure summary="Compact variant disclosure" variant="compact">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Velit distinctio, nesciunt nobis sit, a dolor, non numquam rerum recusandae, deserunt enim assumenda quidem. Id impedit necessitatibus obcaecati ratione reprehenderit laborum?</p>
  </rh-disclosure>

  <rh-disclosure summary="Borderless variant disclosure" variant="borderless">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Velit distinctio, nesciunt nobis sit, a dolor, non numquam rerum recusandae, deserunt enim assumenda quidem. Id impedit necessitatibus obcaecati ratione reprehenderit laborum?</p>
  </rh-disclosure>

  <rh-disclosure summary="Borderless compact disclosure" variant="borderless compact">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Velit distinctio, nesciunt nobis sit, a dolor, non numquam rerum recusandae, deserunt enim assumenda quidem. Id impedit necessitatibus obcaecati ratione reprehenderit laborum?</p>
  </rh-disclosure>
</div>

import { Disclosure } from "@rhds/elements/react/rh-disclosure/rh-disclosure.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <div className="container">
    <Disclosure summary="Compact variant disclosure" variant="compact">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Velit distinctio, nesciunt nobis sit, a dolor, non numquam rerum recusandae, deserunt enim assumenda quidem. Id impedit necessitatibus obcaecati ratione reprehenderit laborum?</p>
    </Disclosure>
    <Disclosure summary="Borderless variant disclosure" variant="borderless">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Velit distinctio, nesciunt nobis sit, a dolor, non numquam rerum recusandae, deserunt enim assumenda quidem. Id impedit necessitatibus obcaecati ratione reprehenderit laborum?</p>
    </Disclosure>
    <Disclosure summary="Borderless compact disclosure" variant="borderless compact">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing, elit. Velit distinctio, nesciunt nobis sit, a dolor, non numquam rerum recusandae, deserunt enim assumenda quidem. Id impedit necessitatibus obcaecati ratione reprehenderit laborum?</p>
    </Disclosure>
  </div>
);