-
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 #141 from US-CBP/feature/cbp-expand
Feature/cbp expand
- Loading branch information
Showing
18 changed files
with
369 additions
and
24 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
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
64 changes: 64 additions & 0 deletions
64
packages/web-components/src/components/cbp-expand/cbp-expand.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,64 @@ | ||
| :root { | ||
| --cbp-accordion-item-control-font-size: var(--cbp-font-size-heading-sm); | ||
| --cbp-accordion-item-control-font-weight: var(--cbp-font-weight-semibold); | ||
| --cbp-expand-control-gap: var(--cbp-space-1x); | ||
| --cbp-expand-control-padding: var(--cbp-space-3x); | ||
| --cbp-expand-content-padding: var(--cbp-space-3x); | ||
| } | ||
|
|
||
| cbp-expand { | ||
| display: block; | ||
|
|
||
| &:not([open]) { | ||
| --cbp-expand-rotate-icon: rotate(-90deg); | ||
| } | ||
|
|
||
| &:not([open]) .cbp-expand--content { | ||
| display: none; | ||
| } | ||
|
|
||
| &[open] { | ||
| --cbp-expand-color: var(--cbp-color-text-lighter); | ||
| --cbp-expand-color-fill: var(--cbp-color-gray-cool-60); | ||
|
|
||
| .cbp-expand--control { | ||
| --cbp-accordion-rotate-icon: rotate(90deg); | ||
| --cbp-accordion-toggle: expandTo 500ms; | ||
| //--cbp-expand-color-border: var(--cbp-color-gray-cool-60); | ||
| } | ||
| } | ||
|
|
||
| .cbp-expand--control { | ||
| //display: flex; | ||
| //gap: var(--cbp-expand-control-gap); | ||
| //min-height: var(--cbp-space-13x); | ||
| font-size: var(--cbp-expand-control-font-size); | ||
| //font-weight: var(--cbp-expand-control-font-weight); | ||
| //padding: var(--cbp-expand-control-padding); | ||
| cursor: pointer; | ||
|
|
||
| .cbp-expand--toggle { | ||
| --cbp-button-padding: 0; | ||
| --cbp-button-border-width: 0; | ||
|
|
||
| cbp-icon svg { | ||
| transition: transform 150ms; | ||
| transform: var(--cbp-expand-rotate-icon); | ||
| } | ||
| } | ||
|
|
||
| &:hover .cbp-expand--toggle { | ||
| --cbp-button-color-text: var(--cbp-color-text-lightest); | ||
| --cbp-button-color-fill: var(--cbp-color-interactive-secondary-darker); | ||
| --cbp-button-color-text-hover: var(--cbp-color-text-lightest); | ||
| --cbp-button-color-fill-hover: var(--cbp-color-interactive-secondary-darker); | ||
| } | ||
| } | ||
|
|
||
| .cbp-expand--content { | ||
| padding-left: var(--cbp-space-7x); | ||
| } | ||
|
|
||
| } | ||
|
|
||
|
|
39 changes: 39 additions & 0 deletions
39
packages/web-components/src/components/cbp-expand/cbp-expand.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,39 @@ | ||
| import { Meta } from '@storybook/addon-docs'; | ||
|
|
||
| <Meta title="Components/Expand/Specifications" /> | ||
|
|
||
| # cbp-expand | ||
|
|
||
| ## Purpose | ||
|
|
||
| The Expand component is a standalone component used for progressive disclosure, organizing content under a relevant heading which is used as a control for revealing and hiding its content. | ||
|
|
||
| ## Functional Requirements | ||
|
|
||
| * The Expand component is made up of a heading, control, and content. | ||
| * While the entire heading is not a button, clicking anywhere on it will toggle its content. | ||
| * The "caret" icon button will gain focus when using the keyboard for navigation. | ||
| * By default the content is hidden, but the Expand component may be specified as `open` via property. | ||
|
|
||
| ## Technical Specifications | ||
|
|
||
| ### User Interactions | ||
|
|
||
| * The Expand component's content is toggled via its heading. | ||
| * While the entire heading is not a button, clicking anywhere on it will toggle its content. | ||
| * When using keyboard navigation, the actual caret button will gain focus and activation will toggle the content visibility. | ||
|
|
||
| ### Responsiveness | ||
|
|
||
| * The component heading and content will wrap as needed based on the viewport/device. | ||
|
|
||
| ### Accessibility | ||
|
|
||
| * Expand component headings default to `h4` tags, but should use the appropriate heading level for the document structure. | ||
| * When the component heading is activated, whether content is expanded or collapsed, focus is sent to the actual button control. | ||
| * The button control has the `aria-expanded` attribute applied to convey statefulness of the control. | ||
| * The button control also contains the `aria-controls` attribute, referencing the `id` of the content wrapper. | ||
|
|
||
| ### Additional Notes and Considerations | ||
|
|
||
| * The Expand component may be used inside of an Accordion Item, but an Accordion should never be placed inside of the Expand component. |
71 changes: 71 additions & 0 deletions
71
packages/web-components/src/components/cbp-expand/cbp-expand.stories.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,71 @@ | ||
| export default { | ||
| title: 'Components/Expand', | ||
| tags: ['autodocs'], | ||
| argTypes: { | ||
| label: { | ||
| description: 'Label text making up the heading control for the Expand component.', | ||
| control: 'text', | ||
| }, | ||
| content: { | ||
| name: 'content (slotted)', | ||
| description: 'Content to be hidden/revealed. May include markup, but not supported by Storybook.', | ||
| control: 'text', | ||
| }, | ||
| headingLevel: { | ||
| description: 'Specifies the heading level for the component heading, which acts as the expand control. Defaults to "h4".', | ||
| control: 'select', | ||
| options: ['h2', 'h3', 'h4', 'h5', 'h6'], | ||
| }, | ||
| open: { | ||
| description: 'Indicates whether the component is in an "open" or "closed" state affecting content visibility.', | ||
| control: 'boolean', | ||
| }, | ||
| sx: { | ||
| description: 'Supports adding inline styles as an object of key-value pairs comprised of CSS properties and values. Values should reference design tokens when possible.', | ||
| control: 'object', | ||
| }, | ||
| }, | ||
| args: { | ||
| label: 'This is the Expand label.', | ||
| content: 'This is the hidden/revealed content.', | ||
| }, | ||
| }; | ||
|
|
||
| const Template = ({ label, content, open, headingLevel, sx }) => { | ||
| return ` | ||
| <cbp-expand | ||
| ${label ? `label="${label}"` : ''} | ||
| ${headingLevel ? `heading-level="${headingLevel}"` : ''} | ||
| ${open ? `open` : ''} | ||
| ${sx ? `sx=${JSON.stringify(sx)}` : ''} | ||
| > | ||
| ${content} | ||
| </cbp-expand> | ||
| `; | ||
| }; | ||
| export const Expand = Template.bind({}); | ||
|
|
||
| /* | ||
| const StackedTemplate = ({ label, content, open, headingLevel, sx }) => { | ||
| return ` | ||
| <cbp-expand | ||
| ${label ? `label="${label}"` : ''} | ||
| ${headingLevel ? `heading-level="${headingLevel}"` : ''} | ||
| ${open ? `open` : ''} | ||
| ${sx ? `sx=${JSON.stringify(sx)}` : ''} | ||
| > | ||
| ${content} | ||
| </cbp-expand> | ||
| <cbp-expand | ||
| ${label ? `label="${label}"` : ''} | ||
| ${headingLevel ? `heading-level="${headingLevel}"` : ''} | ||
| ${open ? `open` : ''} | ||
| ${sx ? `sx=${JSON.stringify(sx)}` : ''} | ||
| > | ||
| ${content} | ||
| </cbp-expand> | ||
| `; | ||
| }; | ||
| export const Stacked = StackedTemplate.bind({}); | ||
| */ |
Oops, something went wrong.