USWDS-Next - Alpha: Create usa-details web component

src/components/usa-details/details.stories.js

@@ -0,0 +1,102 @@
+import "./index";
+import { html, nothing } from "lit";
+
+export default {
+  title: "Components/Details",
+  component: "usa-details",
+  argTypes: {
+    groupName: { name: "Details group name" },
+    bordered: { name: "Add border to panels" },
+    item1Summary: {name: "Item 1 - Summary text"},
+    item1Content: { name: "Item 1 - Panel content"},
+    item1Open: { name: "Item 1 - Open panel on load"},
+    item2Show: { name: "Include item 2 in preview"},
+    item2Summary: {name: "Item 2 - Summary text", if: { arg: 'item2Show' } },
+    item2Content: { name: "Item 2 - Panel content", if: { arg: 'item2Show' } },
+    item2Open: { name: "Item 2 - Open panel on load", if: { arg: 'item2Show' } },
+    item3Show: { name: "Include item 3 in preview"},
+    item3Summary: {name: "Item 3 - Summary text", if: { arg: 'item3Show' } },
+    item3Content: { name: "Item 3 - Panel content", if: { arg: 'item3Show' } },
+    item3Open: { name: "Item 3 - Open panel on load", if: { arg: 'item3Show' } },
+  },
+  args: {
+    groupName: "",
+    bordered: false,
+    item1Summary: "First Amendment",
+    item1Content: "Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress of grievances.",
+    item1Open: false,
+    item2Show: false,
+    item2Summary: "Second Amendment",
+    item2Content: "A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.",
+    item2Open: false,
+    item3Show: false,
+    item3Summary: "Third Amendment",
+    item3Content: "No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.",
+    item3Open: false,
+  },
+  render: ({
+    groupName,
+    bordered,
+    item1Summary,
+    item1Content,
+    item1Open,
+    item2Show,
+    item2Summary,
+    item2Content,
+    item2Open,
+    item3Show,
+    item3Summary,
+    item3Content,
+    item3Open,
+  }) => html`
+    <usa-details bordered="${bordered || nothing}">
+      <details open=${item1Open || nothing} name=${groupName || nothing}>
+        <summary>${item1Summary}</summary>
+        <div slot="details-body">${item1Content}</div>
+      </details>
+      ${item2Show ? html`
+      <details open=${item2Open || nothing} name=${groupName || nothing}>
+        <summary>${item2Summary}</summary>
+        <div slot="details-body">${item2Content}</div>
+      </details>
+      `: null}
+      ${item3Show ? html`
+      <details open=${item3Open || nothing} name=${groupName || nothing}>
+        <summary>${item3Summary}</summary>
+        <div slot="details-body">${item3Content}</div>
+      </details>
+      `: null}
+    </usa-details>
+  `,
+};
+
+export const Default = {};
+
+export const bordered = {
+  args: {
+    bordered: true
+  }
+};
+
+export const Open = {
+  args: {
+    item1Open: true,
+  },
+}
+
+export const GroupSingleSelect = {
+  args: {
+    groupName: "example-group-name",
+    item1Open: true,
+    item2Show: true,
+    item3Show: true,
+  },
+}
+
+export const GroupMultiSelect = {
+  args: {
+    item1Open: true,
+    item2Show: true,
+    item3Show: true,
+  },
+}

src/components/usa-details/index.js

@@ -0,0 +1,63 @@
+import { LitElement, html, css, unsafeCSS, nothing } from "lit";
+import { classMap } from "lit/directives/class-map.js";
+import styles from "./usa-details.css.js";
+import uswdsCoreStyles from "@uswds/uswds/scss/uswds-core?inline";
+
+/**
+ * @summary The usa-details component.
+ *
+ * @slot details-body - Content for the details panel
+ *
+ * @attribute {Boolean} open - Set the panel to be open on load
+ * @attribute {String} name - Add a group name if the element is part of a details group
+ *
+ * @cssprop --theme-details-font-family - Sets the font family for the details element
+ * @cssprop --theme-details-border-color - Sets the border width for the details element
+ * @cssprop --theme-details-border-width - Sets the border color for the details element
+ * @cssprop --theme-details-background-color - Sets the background color of the content panels
+ * @cssprop --theme-details-summary-background-color - Sets the background color of the summary element
+ *
+ * @tagname usa-details
+ */
+export class UsaDetails extends LitElement {
+  static styles = [unsafeCSS(uswdsCoreStyles), styles];
+
+  static properties = {
+    bordered: { type: Boolean }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.details = [...this.querySelectorAll('details')];
+  }
+
+  template() {
+    const classes = {
+      "usa-details": true,
+      "usa-details__bordered": this.bordered
+    }
+    return html`
+      ${this.details.map((detail) => {
+          this.summary = detail.querySelector('summary');
+          this.content = detail.querySelector('[slot="details-body"]');
+          this.open = detail.getAttribute('open');
+          this.name = detail.getAttribute('name');
+          this.summary.classList.add('usa-details__summary');
+          this.content.classList.add('usa-details__content');
+
+          return html`
+            <details class="${classMap(classes)}" open="${this.open || nothing}" name="${this.name || nothing}">
+              ${this.summary}
+              ${this.content}
+            </details>
+          `;
+      })}
+    `;
+  }
+
+  render() {
+    return this.template();
+  }
+}
+
+window.customElements.define("usa-details", UsaDetails);

src/components/usa-details/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "usa-details",
+  "version": "0.0.1",
+  "description": "USWDS details component",
+  "main": "index.js",
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "SEE LICENSE IN LICENSE.md"
+}

src/components/usa-details/usa-details.css.js

@@ -0,0 +1,48 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    .usa-details {
+        color: #1b1b1b;
+        /* TODO: use var to define this */
+        font-family: Source Sans Pro Web,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
+        font-size: 1.06rem;
+        line-height: 1.5;
+        margin-top: .5rem;
+      }
+      .usa-details__summary {
+        /* TODO: use local files */
+        /* TODO: determine if background image is still the best way to add icons here */
+        background-image: url(https://designsystem.digital.gov/assets/img/usa-icons/add.svg);
+        background-repeat: no-repeat;
+        background-size: 1.5rem;
+        background-color: var(--theme-details-summary-background-color, #f0f0f0);
+        background-repeat: no-repeat;
+        background-position: right 1.25rem center;
+        cursor: pointer;
+        font-size: 1.06rem;
+        font-weight: 700;
+        line-height: .9;
+        padding: 1rem 3.5rem 1rem 1.25rem;
+      }
+      .usa-details__content {
+        background-color: var(--theme-details-background-color, #fff);
+        padding: 1.5rem 1.25rem 1.5rem 1rem;
+      }
+      .usa-details__bordered {
+        border-color: var(--theme-details-border-color, #f0f0f0);
+        border-width: var(--theme-details-border-width, 0.25rem);
+        border-style: solid;
+      }
+      .usa-details[open] .usa-details__summary {
+        /* TODO: use local files */
+        background-image: url(https://designsystem.digital.gov/assets/img/usa-icons/remove.svg);
+      }
+      .usa-details > .usa-details__summary  {
+        list-style: none;
+      }
+      .usa-details > .usa-details__summary ::-webkit-details-marker {
+        display: none;
+      }
+  }
+`;