-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #142 from US-CBP/feature/cbp-structured-list
Feature/cbp structured list
- Loading branch information
Showing
11 changed files
with
477 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
...ages/web-components/src/components/cbp-structured-list-item/cbp-structured-list-item.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| cbp-structured-list-item { | ||
| display: block; | ||
|
|
||
| &[color=danger]:not([selected]) { | ||
| background-color: var(--cbp-color-danger-lighter) !important; | ||
| } | ||
|
|
||
| &[selected] { | ||
| background-color: var(--cbp-color-interactive-selected-light) !important; | ||
| } | ||
| } |
38 changes: 38 additions & 0 deletions
38
packages/web-components/src/components/cbp-structured-list-item/cbp-structured-list-item.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import { Component, Prop, Element, Host, h } from '@stencil/core'; | ||
| import { setCSSProps } from '../../utils/utils'; | ||
|
|
||
| @Component({ | ||
| tag: 'cbp-structured-list-item', | ||
| styleUrl: 'cbp-structured-list-item.scss', | ||
| }) | ||
|
|
||
| export class CbpStructuredListItem { | ||
|
|
||
| @Element() host: HTMLElement; | ||
|
|
||
| /** Optionally specifies a color variant based on design tokens. */ | ||
| @Prop({ reflect: true }) color: 'danger'; | ||
|
|
||
| /** Specifies whether the item is selected. */ | ||
| @Prop({ reflect: true }) selected: boolean; | ||
|
|
||
| /** Supports adding inline styles as an object */ | ||
| @Prop() sx: any = {}; | ||
|
|
||
| componentWillLoad() { | ||
| if (typeof this.sx == 'string') { | ||
| this.sx = JSON.parse(this.sx) || {}; | ||
| } | ||
| setCSSProps(this.host, { | ||
| ...this.sx, | ||
| }); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <Host role="listitem"> | ||
| <slot /> | ||
| </Host> | ||
| ); | ||
| } | ||
| } |
49 changes: 49 additions & 0 deletions
49
packages/web-components/src/components/cbp-structured-list/cbp-structured-list.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| :root { | ||
| --cbp-structured-list-item-padding: var(--cbp-space-4x); | ||
| } | ||
| cbp-structured-list { | ||
| display: block; | ||
| background-color: var(--cbp-color-white); | ||
|
|
||
| [slot] { | ||
| display: flex; | ||
| align-items: center; | ||
| padding: var(--cbp-space-3x); | ||
| min-height: var(--cbp-space-13x); | ||
| font-weight: var(--cbp-font-weight-bold); | ||
|
|
||
| // Nesting 2 flex contexts will not take up 100% of the width | ||
| *:only-child { | ||
| flex-basis: 100%; | ||
| } | ||
| } | ||
|
|
||
| [slot=cbp-structured-list-header] { | ||
| color: var(--cbp-color-text-darkest); | ||
| background-color: var(--cbp-color-gray-cool-30); | ||
| font-style: italic; | ||
| } | ||
|
|
||
| [slot=cbp-structured-list-footer] { | ||
| color: var(--cbp-color-text-lightest); | ||
| background-color: var(--cbp-color-gray-cool-70); | ||
| } | ||
|
|
||
| &[striped] [role=list] > *:nth-child(even) { | ||
| background-color: var(--cbp-color-gray-cool-4); | ||
| } | ||
|
|
||
| // Style all list items regardless of the element used to wrap/define them (don't leave this to cbp-structured-list-item) | ||
| div[role=list] > * { | ||
| display: block; | ||
| padding: var(--cbp-structured-list-item-padding); | ||
| border-bottom-style: solid; | ||
| border-bottom-width: var(--cbp-border-size-md); | ||
| border-bottom-color: var(--cbp-color-gray-cool-30); | ||
|
|
||
| &:hover { | ||
| background-color: var(--cbp-color-gray-cool-10) !important; | ||
| } | ||
| } | ||
|
|
||
| } |
53 changes: 53 additions & 0 deletions
53
...web-components/src/components/cbp-structured-list/cbp-structured-list.specs.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,53 @@ | ||
| import { Meta } from '@storybook/addon-docs'; | ||
|
|
||
| <Meta title="Components/Structured List/Specifications" /> | ||
|
|
||
| # cbp-structured-list and cbp-structured-list-item | ||
|
|
||
| ## Purpose | ||
|
|
||
| Structured lists are a way of displaying long lists of data where the user is not directly comparing raw data one row at a time. | ||
|
|
||
| ## Functional Requirements | ||
|
|
||
| * The parent Structured List component renders a `div` with `role="list"`, with optional slots for header and footer information before and after it respectively. | ||
| * The Structured List may contain plain `li` elements slotted within the default slot. | ||
| * Optionally, the Structured List Item component (`cbp-structured-list-item`) may be slotted within the default slot if additional functionality will be used, such as: | ||
| * Selecting of items | ||
| * Shading of rows in a `danger` color. | ||
|
|
||
| ## Technical Specifications | ||
|
|
||
| ### User Interactions | ||
|
|
||
| * The Structured List supports styling for selected list items. | ||
| * The actual user interactions and implementation of checkboxes and buttons via slotted content is provided by the application code. | ||
|
|
||
| ### Responsiveness | ||
|
|
||
| * The Structured List is semantically an unordered list. However, its contents may be complex and arranged in a grid with faux columns. | ||
| * Because each list item is separate, an overarching grid context that takes queues from content length cannot be established to lay out the list. | ||
| * Creating equal width columns can only be achieved using CSS Grid or the `cbp-grid` component within each list item. | ||
| * These grid columns should be explicitly defined and not determined by content length, since each row/item is independent and columns may not line up across rows/items. | ||
| * A responsive grid that wraps, containing equal sized (but flexible) columns may be achieved using some variant of `grid-template-columns` with `autofit`, | ||
| e.g., `grid-template-columns="repeat(auto-fit, minmax(5rem, 1fr))"`. | ||
| * For grids that require more granular definition of each column, the `cbp-grid` component's `breakpoint` property may be used to linearize the grid at a specified viewport size. | ||
|
|
||
| ### Accessibility | ||
|
|
||
| * The Structured List should be recognizable as a semantic list, regardless of how it is marked up. | ||
| * The parent `cbp-structured-list` component renders a `div` with `role="list"`. | ||
| * The immediate children slotted within the default slot of the parent should be one of the following: | ||
| * `li` elements | ||
| * `cbp-structured-list-item` components | ||
| * any other container with a `role="listitem"`. | ||
| * The `cbp-structured-list-item` component applies a `role="listitem"` to its host tag, acting as a proper list item. | ||
| * The Structured List component should have a value specified for its `accessibilityText` property, which describes the list and is applied via `aria-label`. | ||
| * If the Structured List has a header (content in the `cbp-structured-list-header` named slot), this element should be given an `id`, which is also specified as the `headerId` property | ||
| and used to link the header to the list via the `aria-describedby` attribute, providing additional context for the list to screen readers. | ||
| * The Structured List is not a table and has no column headings. If you feel the need for column headings, you should use a table instead. | ||
|
|
||
| ### Additional Notes and Considerations | ||
|
|
||
| * The named slot `cbp-structured-list-footer` is intended for an action bar when items are selected and should not be used otherwise. | ||
| * TODO: integrating the `cbp-structured-list-item` `selected` property with user interaction with a checkbox may take additional work and testing. |
Oops, something went wrong.