-
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 #212 from US-CBP/bugfix/accordion-title-slotted
Bugfix/accordion title slotted
- Loading branch information
Showing
15 changed files
with
7,234 additions
and
8,808 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1 @@ | ||
| <link rel="icon" type="image/x-icon" href="assets/images/cbp-seal.svg"> | ||
| <link rel="icon" type="image/svg+xml" href="assets/images/cbp-seal.svg"> |
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
193 changes: 113 additions & 80 deletions
193
packages/web-components/src/components/cbp-accordion/cbp-accordion.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 |
|---|---|---|
| @@ -1,88 +1,121 @@ | ||
| export default { | ||
| title: 'Components/Accordion', | ||
| tags: ['autodocs'], | ||
| argTypes: { | ||
| items: { | ||
| name: 'Accordion Items', | ||
| description: 'Configure various aspects of the accordion items within the accordion.', | ||
| control: 'object', | ||
| title: 'Components/Accordion', | ||
| tags: ['autodocs'], | ||
| argTypes: { | ||
| items: { | ||
| name: 'Accordion Items', | ||
| description: 'Configure various aspects of the accordion items within the accordion.', | ||
| control: 'object', | ||
| }, | ||
| multiple: { | ||
| description: 'Specifies whether multiple accordion items may remain open at the same time.', | ||
| control: 'boolean', | ||
| }, | ||
| context: { | ||
| control: 'select', | ||
| options: ['light-inverts', 'light-always', 'dark-inverts', 'dark-always'], | ||
| }, | ||
| 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: { | ||
| items: [ | ||
| { | ||
| label: 'Accordion Item 1', | ||
| open: false, | ||
| headingLevel: '', | ||
| color: 'default', | ||
| content: 'Accordion item 1 content.', | ||
| }, | ||
| multiple: { | ||
| description: 'Specifies whether multiple accordion items may remain open at the same time.', | ||
| control: 'boolean', | ||
| { | ||
| label: 'Accordion Item 2', | ||
| open: false, | ||
| headingLevel: '', | ||
| color: 'default', | ||
| content: 'Accordion item 2 content.', | ||
| }, | ||
| context : { | ||
| control: 'select', | ||
| options: [ "light-inverts", "light-always", "dark-inverts", "dark-always"] | ||
| { | ||
| label: 'Accordion Item 3', | ||
| open: false, | ||
| headingLevel: '', | ||
| color: 'danger', | ||
| content: 'Accordion item 3 content.', | ||
| }, | ||
| 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', | ||
| { | ||
| label: 'Accordion Item 4', | ||
| open: false, | ||
| headingLevel: '', | ||
| color: 'default', | ||
| content: 'Accordion item 4 content.', | ||
| }, | ||
| }, | ||
| args: { | ||
| items: [ | ||
| { | ||
| label: 'Accordion Item 1', | ||
| open: false, | ||
| headingLevel: '', | ||
| color: 'default', | ||
| content: 'Accordion item 1 content.', | ||
| }, | ||
| { | ||
| label: 'Accordion Item 2', | ||
| open: false, | ||
| headingLevel: '', | ||
| color: 'default', | ||
| content: 'Accordion item 2 content.', | ||
| }, | ||
| { | ||
| label: 'Accordion Item 3', | ||
| open: false, | ||
| headingLevel: '', | ||
| color: 'danger', | ||
| content: 'Accordion item 3 content.', | ||
| }, | ||
| { | ||
| label: 'Accordion Item 4', | ||
| open: false, | ||
| headingLevel: '', | ||
| color: 'default', | ||
| content: 'Accordion item 4 content.', | ||
| }, | ||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| ], | ||
| }, | ||
| }; | ||
|
|
||
| function generateChildren(items) { | ||
| const html = items.map(({ label, content, open, color, headingLevel }) => { | ||
| return ` | ||
| <cbp-accordion-item | ||
| ${label ? `label="${label}"` : ''} | ||
| ${open == true ? 'open' : ''} | ||
| ${color === 'danger' ? `color=${color}` : ''} | ||
| ${headingLevel ? `heading-level=${headingLevel}` : ''} | ||
| > | ||
| ${content} | ||
| </cbp-accordion-item> | ||
| `; | ||
| }); | ||
| return html.join(''); | ||
| } | ||
|
|
||
| const Template = ({ items, multiple, context, sx }) => { | ||
| return ` | ||
| <cbp-accordion | ||
| ${multiple ? `multiple` : ''} | ||
| ${context && context != 'light-inverts' ? `context=${context}` : ''} | ||
| ${sx ? `sx=${JSON.stringify(sx)}` : ''} | ||
| > | ||
| ${generateChildren(items)} | ||
| </cbp-accordion> | ||
| `; | ||
| }; | ||
|
|
||
| export const Accordion = Template.bind({}); | ||
| Accordion.args = {}; | ||
|
|
||
|
|
||
|
|
||
| function generateChildren(items) { | ||
| const html = items.map(({ label, content, open, color, headingLevel }) => { | ||
| return ` | ||
| <cbp-accordion-item | ||
| ${label ? `label="${label}"` : ''} | ||
| ${open == true ? 'open' : ''} | ||
| ${color === 'danger' ? `color=${color}` : ''} | ||
| ${headingLevel ? `heading-level=${headingLevel}` : ''} | ||
| > | ||
| ${content} | ||
| </cbp-accordion-item> | ||
| `; | ||
| }); | ||
| return html.join(''); | ||
| } | ||
|
|
||
| function generateSlottedChildren(items) { | ||
| const html = items.map(({ label, content, open, color, headingLevel }) => { | ||
| return ` | ||
| <cbp-accordion-item | ||
| ${open == true ? 'open' : ''} | ||
| ${color === 'danger' ? `color=${color}` : ''} | ||
| > | ||
| <div slot="cbp-accordion-item-label"> | ||
| <cbp-typography ${headingLevel ? `tag=${headingLevel}` : ''} variant="heading-sm">${label}</cbp-typography> | ||
| <cbp-badge>55</cbp-badge> | ||
| </div> | ||
| ${content} | ||
| </cbp-accordion-item> | ||
| `; | ||
| }); | ||
| return html.join(''); | ||
| } | ||
|
|
||
| const Template = ({ items, multiple, context, sx }) => { | ||
| return ` | ||
| <cbp-accordion | ||
| ${multiple ? `multiple` : ''} | ||
| ${context && context != 'light-inverts' ? `context=${context}` : ''} | ||
| ${sx ? `sx=${JSON.stringify(sx)}` : ''} | ||
| > | ||
| ${generateChildren(items)} | ||
| </cbp-accordion> | ||
| `; | ||
| }; | ||
| const AccordionWithSlottedLabelTemplate = ({ items, multiple, context, sx }) => { | ||
| return ` | ||
| <cbp-accordion | ||
| ${multiple ? `multiple` : ''} | ||
| ${context && context != 'light-inverts' ? `context=${context}` : ''} | ||
| ${sx ? `sx=${JSON.stringify(sx)}` : ''} | ||
| > | ||
| ${generateSlottedChildren(items)} | ||
| </cbp-accordion> | ||
| `; | ||
| }; | ||
|
|
||
| export const Accordion = Template.bind({}); | ||
| Accordion.args = {} | ||
| export const AccordionWithSlottedLabel = AccordionWithSlottedLabelTemplate.bind({}); | ||
| AccordionWithSlottedLabel.args = {}; |
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
Oops, something went wrong.