Disclosure

Disclosure is a good example of progressive enhancement because the content already exists in the markup and the component only layers behavior on top.

Live Demo

Open this demo in a new tab

HTML

<section data-disclosure>
    <button
        type="button"
        aria-expanded="false"
        data-disclosure-button
    >
        More details
    </button>

    <div hidden data-disclosure-panel>
        Progressive enhancement keeps this content in the document.
    </div>
</section>

Component

JavaScript

import { defineComponent } from "ornata";

export const Disclosure = defineComponent({
    name: "Disclosure",
    state: {
        open: { default: false, type: Boolean },
    },
    elements: {
        button: { query: "[data-disclosure-button]" },
        panel: { query: "[data-disclosure-panel]" },
    },
    methods: {
        toggle() {
            this.state.open = !this.state.open;
        },
    },
    render: {
        button() {
            return {
                attributes: {
                    "aria-expanded": String(this.state.open),
                },
                events: {
                    click: () => this.methods.toggle(),
                },
            };
        },
        panel() {
            return {
                attributes: {
                    hidden: !this.state.open,
                },
            };
        },
    },
});

TypeScript

import { defineComponent } from "ornata";

interface DisclosureState {
    open: boolean;
}

interface DisclosureElements {
    button: Element | null;
    panel: Element | null;
}

interface DisclosureMethods {
    toggle(): void;
}

export const Disclosure = defineComponent<{
    state: DisclosureState;
    elements: DisclosureElements;
    methods: DisclosureMethods;
}>({
    name: "Disclosure",
    state: {
        open: { default: false, type: Boolean },
    },
    elements: {
        button: { query: "[data-disclosure-button]" },
        panel: { query: "[data-disclosure-panel]" },
    },
    methods: {
        toggle() {
            this.state.open = !this.state.open;
        },
    },
    render: {
        button() {
            return {
                attributes: {
                    "aria-expanded": String(this.state.open),
                },
                events: {
                    click: () => this.methods.toggle(),
                },
            };
        },
        panel() {
            return {
                attributes: {
                    hidden: !this.state.open,
                },
            };
        },
    },
});

Mount

JavaScript

Disclosure.mount("[data-disclosure]");

TypeScript

Disclosure.mount("[data-disclosure]");