-
Notifications
You must be signed in to change notification settings - Fork 4
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
USWDS-Next - Alpha: Create usa-details
web component
#29
base: develop
Are you sure you want to change the base?
Changes from 11 commits
8cec43f
c7c9700
671abca
7ee3737
57140c8
7509fc1
a50916c
27ef4e6
f628083
55f89c8
83f51f1
db372e3
b4ebc5d
21c2a02
cd7b972
26e846c
d833c45
4f8bad3
cef69c9
0c38bf6
b7f5356
c0f002e
4c8c0b4
ab86a58
184fad1
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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' } }, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thought: It'd be nice if we could do this in a more intuitive way that wasn't focused on a fixed number of elements. Possible control ideas
|
||
}, | ||
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, | ||
}, | ||
} |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Question: Are there any events we can trigger via JS on this component? For example, details-toggle-2024-07-05.at.13.17.58.webm |
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
@@ -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 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thought: I wonder if there's a way to show these component settings in storybook args. |
||||||
* | ||||||
* @tagname usa-details | ||||||
*/ | ||||||
export class UsaDetails extends LitElement { | ||||||
static styles = [unsafeCSS(uswdsCoreStyles), styles]; | ||||||
|
||||||
static properties = { | ||||||
bordered: { type: Boolean } | ||||||
} | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Question (non-blocking): Should There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I was only listing the props that should be added to |
||||||
|
||||||
connectedCallback() { | ||||||
super.connectedCallback(); | ||||||
this.details = [...this.querySelectorAll('details')]; | ||||||
} | ||||||
|
||||||
template() { | ||||||
const classes = { | ||||||
"usa-details": true, | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Issue: This should be on the element if it's not dynamic. |
||||||
"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}"> | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Issue: In native disclosure, the We should follow this pattern to keep things consistent. The Details disclosure element - HTML: HyperText Markup Language | MDN There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
${this.summary} | ||||||
${this.content} | ||||||
</details> | ||||||
`; | ||||||
})} | ||||||
`; | ||||||
} | ||||||
|
||||||
render() { | ||||||
return this.template(); | ||||||
amyleadem marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
} | ||||||
} | ||||||
|
||||||
window.customElements.define("usa-details", UsaDetails); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} |
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Question: Curious why didn't we use |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Question (non-blocking): Is it possible to override this? How would I set my own icon? |
||
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; | ||
} | ||
} | ||
`; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Suggestion (if-minor): These are marked as defaults, but they're only used in two variants.
It'd be nice to cleanly separate this. Some suggestions: