feat: collapse

components/composition/Collapse/Collapse.stories.ts

@@ -0,0 +1,62 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './Collapse';
+
+const description = `
+Animates the expansion and collapse of content within
+when the open prop is toggled.
+
+The button to control the collapse must include aria-controls and aria-expanded attributes.
+`;
+
+export default {
+  component: 'diamond-collapse',
+  parameters: {
+    docs: {
+      description: {
+        component: description,
+      },
+    },
+  },
+};
+
+export const Collapse: StoryObj = {
+  render: () => html`
+    <diamond-button class="diamond-spacing-bottom-md">
+      <button
+        type="button"
+        id="toggle"
+        aria-controls="collapse"
+        aria-expanded="true"
+      >
+        Toggle collapse
+      </button>
+    </diamond-button>
+    <diamond-collapse open id="collapse">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+        suscipit leo sodales sem sollicitudin maximus.
+      </p>
+      <p>
+        Vestibulum viverra turpis sed nisl malesuada lacinia. Aliquam turpis
+        mauris, egestas vulputate erat ut, maximus efficitur augue. Phasellus in
+        ante sit amet enim tristique viverra aliquam vitae libero.
+      </p>
+      <p>
+        Nulla id enim vehicula, varius leo et, sagittis libero. Nam vel dolor
+        fringilla, viverra massa ut, pharetra enim. Praesent non varius nisl.
+      </p>
+    </diamond-collapse>
+    <script>
+      document.addEventListener('DOMContentLoaded', () => {
+        const button = document.getElementById('toggle');
+        button.addEventListener('click', () => {
+          const collapse = document.querySelector('diamond-collapse');
+          collapse.open = !collapse.open;
+          button.setAttribute('aria-expanded', collapse.open.toString());
+        });
+      });
+    </script>
+  `,
+};

components/composition/Collapse/Collapse.ts

@@ -0,0 +1,59 @@
+import { LitElement, css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { JSXCustomElement } from '../../../types/jsx-custom-element';
+
+export interface CollapseAttributes {
+  open?: boolean;
+}
+
+@customElement('diamond-collapse')
+export class Collapse extends LitElement {
+  @property({ reflect: true, type: Boolean }) open?: boolean;
+
+  static readonly styles = [
+    css`
+      :host {
+        content-visibility: hidden;
+        display: grid;
+        grid-template-rows: 0fr;
+        overflow: hidden;
+        transition:
+          grid-template-rows var(--diamond-transition),
+          content-visibility var(--diamond-transition);
+        transition-behavior: allow-discrete;
+      }
+
+      :host([open]:not([open='false'])) {
+        content-visibility: visible;
+        grid-template-rows: 1fr;
+      }
+
+      .diamond-collapse__content {
+        overflow: hidden;
+      }
+    `,
+  ];
+
+  render() {
+    return html`
+      <div class="diamond-collapse__content">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'diamond-collapse': CollapseAttributes;
+  }
+}
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'diamond-collapse': JSXCustomElement<CollapseAttributes>;
+    }
+  }
+}

components/composition/Dialog/Dialog.stories.ts

@@ -29,7 +29,9 @@ export default {
 
 export const Dialog: StoryObj = {
   render: () => html`
-    <button id="toggle">Open dialog</button>
+    <diamond-button>
+      <button type="button" id="toggle">Open dialog</button>
+    </diamond-button>
     <dialog>
       <diamond-wrap size="xs" gutter="none">
         <diamond-card border radius>